如何在下拉列表中添加悬停效果？

Question

我正在设计一个新网站，我添加了一个下拉列表，点击后效果非常好。我基本上希望它能在停留时显示下拉列表。

我尝试的是：

{% include 'currency-picker' %}
                <style>
           .currency-picker {
            background-color: transparent;
            font-size: 12pt;
            font:Montserrat;
            letter-spacing: 2px;
            color: black;
             }
           .currency-picker:hover {
            display: block;
			}
           .currency-picker:hover { 
            background-color: white;

这是下拉本身：

<label class="currency-picker__wrapper">
  <span class="currency-picker__label"></span>
  <select class="currency-picker" name="currencies" style="display: inline; width: auto; vertical-align: inherit;">
  {% assign codes = 'USD,EUR,GBP,CAD,ARS,AUD,BBD,BDT,BSD,BHD,BRL,BOB,BND,BGN,ILS,MMK,KYD,CLP,CNY,COP,CRC,HRK,CZK,DKK,DOP,XCD,EGP,XPF,FJD,GHS,GTQ,GYD,GEL,HKD,HUF,ISK,INR,IDR,NIS,JMD,JPY,JOD,KZT,KES,KWD,LVL,LTL,MXN,MYR,MUR,MDL,MAD,MNT,MZN,ANG,NZD,NGN,NOK,OMR,PKR,PYG,PEN,PHP,PLN,QAR,RON,RUB,SAR,RSD,SCR,SGD,SYP,ZAR,KRW,LKR,SEK,CHF,TWD,THB,TZS,TTD,TRY,UAH,AED,UYU,VEB,VND,ZMK' | split: ',' %}
  {% assign supported_codes = settings.supported_currencies | split: ' ' %}
  <option value="{{ shop.currency }}" selected="selected">{{ shop.currency }}</option>
  {% for code in supported_codes %}
    {% if code != shop.currency and codes contains code %}
    <option value="{{ code }}">{{ code }}</option>
    {% endif %}
  {% endfor %}
  </select>
</label>

奇怪的是， .currency-picker：hover {             background-color：white; 有效，并且在悬停时确实显示白色背景。

有没有人知道我的问题的解决方案？

祝您度过愉快的一天，并获得最好的问候，

伊斯梅尔

Answer 1

在查看您的代码后，您是否有任何理由不使用与其他下拉列表相同的标记？一致性始终是关键。

您尝试做的事情在浏览器中不起作用或不允许。而不是使用实际＆＃34;选择＆＃34;框，我会使用他们在其他下拉菜单上使用的实际标记，这些标记可以为您提供所需的确切功能。

此代码（取自您的网站）应该为您提供如何处理此问题的线索。此外，您还在页面上添加了一个额外的起始脚本标记，您可以在其中删除新的测试代码。

请注意我更改了下面的代码，以便为您提供更好的参考。如果您要将此代码放入您的网站，它会起作用，但您需要重构它以使其动态化。

<li class="site-nav__item site-nav__expanded-item site-nav--has-dropdown" aria-haspopup="true">
<a href="/collections/for-her" class="site-nav__link">USD <span class="icon icon-arrow-down" aria-hidden="true"></span></a>
<ul class="site-nav__dropdown text-left">

<li>
    <a href="/collections/bags" class="site-nav__dropdown-link">EUR</a>
</li>

<li>
    <a href="/collections/high-heels" class="site-nav__dropdown-link">CHF</a>
</li>
</ul>

我改变之后......