鼠标悬停在文本而不是文本字段时显示下拉值

时间:2016-05-04 12:37:28

标签: javascript html css magento

请访问link

在左上角,您可以通过下拉框看到“ currenc y”。一旦你鼠标悬停在那上面,你可以看到如下

enter image description here

在同一链接中,如果向下滚动,则可以看到过滤器:Device, Design, Category, Sort by

设计上鼠标悬停后,您可以看到如下图像

enter image description here

我也需要同样的“货币”功能。

表示我想删除文本字段。

一旦我们鼠标悬停在“货币”文本上,它就会显示下拉值。

脚本

<script>

jQuery(document).ready(function () {
  jQuery('select#select-language').hover(function () {
    jQuery(this).attr('size', jQuery('option').length);
  }, function () {
    jQuery(this).attr('size', 1);
  });
});

</script>

CSS     

select#select-language {
    position: absolute;
    top: 30px;
    z-index: 2;
    margin-top: -2em;
    margin-left: 4em;
padding-right: 2em;
}

option:hover {
    color: white;
    background: #0000FF;
}



</style>

PHTML

<?php if(count($this->getStores())>1): ?>
<div class="form-language">
    <label for="select-language"><?php echo $this->__('Currency:') ?></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; ?>

1 个答案:

答案 0 :(得分:1)

(未经测试)我相信当您将鼠标悬停在带有文字&#34;货币&#34;的标签上时,会显示下拉列表。

<script>

        jQuery(document).ready(function () {
          jQuery('select#select-language').hide();

          jQuery('#yourlabelid').hover(function () {
             jQuery('select#select-language').show();
          });
       });
</script>

更改

<label for="select-language"><?php echo $this->__('Currency:') ?></label>

<label id="relevantname" for="select-language"><?php echo $this->__('Currency:') ?></label>