javascript - 在国家文本旁边显示下拉框

Question

请访问link你可以在左上角看到“国家:”& 下面是下拉框。

1)我想把那个下拉框移到 "country:"旁边，我可以使用 top:5px;lefdt:140px;

但我认为这不是好的 css 实践。

2)我还想在国家名称后留一些空间&

3) 当我们将鼠标悬停在特定国家/地区时，它应该显示不同的颜色。

我想要如下图:

CSS

select#select-language {
    position: absolute;
    top: 30px;
    z-index: 2;
}

脚本

<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>

php

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

1. 将其移动到国家/地区，

应该这样做

select#select-language {
    position: relative;
    z-index: 2;
}

1. 将 size="1"更改为 "5"的悬停效果看起来不是解决该问题的好方法。我建议用户在不悬停的情况下单击下拉菜单。

2. 如果您想在悬停时使用不同的颜色，您可以在 span 元素中添加一个类，封装选项文本并使用伪 :hover 在 css 中使用您想要的颜色分配颜色。如果您像我上面提到的第 2 点那样更改悬停，则选择突出显示将由浏览器自动呈现。