Javascript 显示国家/地区文本旁边的下拉框

请看左上角的“国家”：& 下面是下拉框

1） 我想把下拉框移到“国家：”旁边，我可以使用

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>


jQuery（文档）.ready（函数（）{
jQuery（'select#select language'）。悬停（函数（）{
jQuery（this）.attr（'size'，jQuery（'option'）.length）；
}，函数（）{
jQuery（this.attr（'size'，1）；
});
});

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


将其移动到与国家一致的位置
这应该可以

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

将size=“1”更改为“5”的悬停效果看起来不是一个好方法。我建议用户在不悬停的情况下单击下拉列表

如果希望悬停时使用不同的颜色，可以在span元素中添加一个类，该类封装选项文本，并在css中使用pseudo:hover指定所需颜色的颜色。如果像我前面提到的点2那样更改悬停，浏览器将自动渲染选择高光

将其移动到与国家一致的位置
这应该可以

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

将size=“1”更改为“5”的悬停效果看起来不是一个好方法。我建议用户在不悬停的情况下单击下拉列表

如果希望悬停时使用不同的颜色，可以在span元素中添加一个类，该类封装选项文本，并在css中使用pseudo:hover指定所需颜色的颜色。如果像我前面提到的点2那样更改悬停，浏览器将自动渲染选择高光

它工作得很好，你们能帮我在国家后面留出空格，当我们鼠标移到它上面时，改变特定国家的颜色吗？它工作得很好。当我们将鼠标悬停时，它会显示下拉列表，之后当将鼠标悬停在站点上的其他位置时，
下拉框应该消失
。但现在它一直显示。只有在我们刷新页面时它才会消失。@SPYLH999GGR在我的代码中它工作正常。请仅添加我的css（对于这2个css）并删除其他css。如果可能。是的，我只更新了你的代码，如果你发现任何其他代码，请告诉我我将删除它。是的，我在网站上更新了代码。它工作得很好，你们能帮我在国家之后给空格，或者当我们把鼠标移到它上面的时候改变特定国家的颜色。它工作得很好。当我们将鼠标悬停时，它会显示下拉列表，之后当将鼠标悬停在站点上的其他位置时，
下拉框应该消失
。但现在它一直显示。只有在我们刷新页面时它才会消失。@SPYLH999GGR在我的代码中它工作正常。请仅添加我的css（对于这2个css）并删除其他css。如果可能。是的，我只更新了你的代码，如果你发现任何其他代码，请告诉我我将删除它。是的，我在网站上更新了代码。它工作得很好，你能帮我在国家后面加空格吗？当我们把鼠标移到它上面时，你能帮我改变特定国家的颜色吗？所有问题都解决了，现在背景颜色应该一直延续到最后一个，现在它只覆盖国家的名称。它工作得很好，你能帮我在国家后面加空格吗？当我们把鼠标移到上面时，你能帮我改变特定国家的颜色吗？所有问题都解决了，现在背景颜色应该一直延续到最后一个，现在它只覆盖国家的名称。请检查更新的JS代码，当我将大小从1更改为5时，它增加了长度。你能帮我看一下宽度吗？你能帮我检查一下代码并更新答案吗？为什么你要把size=“1”改成“5”？可以您是否使用选择下拉菜单而不执行您正在执行的操作？我返回。现在唯一的问题是它工作得很好。当我们将鼠标悬停时，它会显示下拉列表，之后当将鼠标悬停在站点上的其他位置时，
下拉框应该消失
。但现在它一直在显示。一旦我们刷新页面，它就会消失。请检查更新的JS代码，当我将大小从1更改为5时，它会增加长度。你能帮我看一下宽度吗？你能帮我检查一下代码并更新答案吗？为什么你要把size=“1”改成“5”？可以您是否使用选择下拉菜单而不执行您正在执行的操作？我返回。现在唯一的问题是它工作得很好。当我们将鼠标悬停时，它会显示下拉列表，之后当将鼠标悬停在站点上的其他位置时，
下拉框应该消失
。但现在它一直在显示。一旦我们刷新页面，它就会消失。
select#select-language {
    position: relative;
    z-index: 2;
}