如何在下拉菜单上添加悬停效果？

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

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

您尝试执行的操作在浏览器中不起作用或不允许。我不会使用实际的 "select" 框，而是使用他们在其他下拉菜单上使用的实际标记，这些标记可为您提供所需的确切功能。

此代码（取自您的站点）应该可以为您提供有关如何处理此问题的线索。此外，您在放置新测试代码的页面上还有一个额外的起始脚本标记..

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

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

我的改变之后...

如何在下拉菜单上添加悬停效果？

How to add a hover effect on a dropdown?

css

liquid