Need to work with mouse-over instead of dropdown

Question

we have multi store view site with countires : India, USA, France

on top of the site we can see those 3 countries, once we click on dropdown-button here

what we need is instead of clicking on dropdown button, it should work with "mouse-over"

app/design/frontend/base/default/template/page/switch/languages.phtml

<?php if(count($this->getStores())>1): ?>
<div class="form-language">
    <label for="select-language"><?php echo $this->__('Your Language:') ?></label>
    <select id="select-language" title="<?php echo $this->__('Your Language') ?>" onchange="window.location.href=this.value">
    <?php foreach ($this->getStores() as $_lang): ?>
        <?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? ' selected="selected"' : '' ?>
        <option value="<?php echo $_lang->getCurrentUrl() ?>"<?php echo $_selected ?>><?php echo $this->escapeHtml($_lang->getName()) ?></option>
    <?php endforeach; ?>
    </select>
</div>
<?php endif; ?>

Answer 1

You can use this solution:

$('select').hover(function() {

  $(this).attr('size', $('option').length);
}, function() {

  $(this).attr('size', 1);
});

It is playing with the length property of the select. Answered already here Trigger click on select box on hover

Answer 2

In plain javascript syntax,

document.getElementById("select-language").onmouseover=function(){
  document.getElementById('select-language').click();
};

Also this Jquery script will do the job..

$("#select-language").mouseover(function(){
    $( "#select-language" ).trigger( "click" );
});

You can use any kind of selector,(#, . or tag)

Answer 3

I would think that if you put onmouseover in the option it should work.

<option onmouseover="window.location.href=this.value" value="<?php echo $_lang->getCurrentUrl() ?>"<?php echo $_selected ?>><?php echo $this->escapeHtml($_lang->getName()) ?></option>