需要使用鼠標懸停而不是下拉菜單

Question

我們有國家/地區的多商店瀏覽網站：印度，美國，法國

在該網站的頂部，我們可以看到那些3個國家，一旦我們點擊下拉按鈕點擊這里

我們需要的是代替單擊下拉按鈕，而應該使用“鼠標懸停”

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

您可以使用以下解決方案：

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

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

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

它正在使用select的length屬性。 已在此處回答觸發時將鼠標懸停在選擇框上

Answer 2

用純JavaScript

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

這個Jquery腳本也可以完成這項工作。

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

Answer 3

我認為，如果您將onmouseover放在選項中，它應該可以工作。

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