드롭 다운에 호버 효과를 추가하는 방법은 무엇입니까?

debugcn 에 게시 Dev

why7

현재 새 웹 사이트를 디자인하고 있으며 클릭하면 완벽하게 작동하는 드롭 다운을 추가했습니다. 기본적으로 마우스를 가져 갔을 때 드롭 다운을 표시하고 싶습니다.

내가 시도한 것은 :

{% 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; 작동하고 실제로 마우스를 올리면 흰색 배경이 표시됩니다.

내 문제의 해결책을 아는 사람이 있습니까?

좋은 하루 되세요.

이스마엘

저드슨 테렐

코드를 살펴본 후 다른 드롭 다운과 동일한 마크 업을 사용하지 않는 이유가 있습니까? 일관성은 항상 핵심입니다.

수행하려는 작업이 작동하지 않거나 브라우저에서 허용되지 않습니다. 실제 "선택"상자를 사용하는 대신 사용자가 찾고있는 정확한 기능을 제공하는 다른 드롭 다운에서 사용중인 실제 마크 업을 사용합니다.

이 코드 (사이트에서 가져옴)는이를 처리하는 방법에 대한 단서를 제공합니다. 또한 새 테스트 코드를 놓은 페이지에 추가 시작 스크립트 태그가 있습니다.

더 나은 참조를 제공하기 위해 아래 코드를 약간 변경했습니다. 이 코드를 사이트에 드롭하면 작동하지만 동적으로 만들기 위해 리팩토링해야합니다.

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

변경 후 ...

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-20

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

드롭 다운에 호버 효과를 추가하는 방법은 무엇입니까?

드롭 다운에 호버 효과를 추가하는 방법은 무엇입니까?

마우스 오버 후 드롭 다운 메뉴 슬라이더 효과를 아래에서 위로 표시하는 방법은 무엇입니까?

드롭 다운 메뉴를 추가하는 방법은 무엇입니까?

Java의 드롭 다운 또는 라디오 버튼에서 선택에 따라 textArea를 추가하는 방법은 무엇입니까?

Java의 드롭 다운 또는 라디오 버튼에서 선택에 따라 textArea를 추가하는 방법은 무엇입니까?

HTML5의 헤더에 호버 효과를 추가하는 방법은 무엇입니까?

인라인 SwiftUI NavigationBarTitle에 드롭 다운 메뉴를 추가하는 방법은 무엇입니까?

드롭 다운 목록 값에 쉼표를 추가하는 방법은 무엇입니까?

선택했을 때 스타 코드에 호버 효과를주는 방법은 무엇입니까?

자바 스크립트 : 드롭 다운 효과를 만드는 방법은 무엇입니까? (JQuery없이)

Qt 라벨 호버 효과를 만드는 방법은 무엇입니까?

버전 번호를 추가하지 않고 Jar를 Archiva에 업로드하는 방법은 무엇입니까?

수평 스크롤에 부드러운 스크롤 효과를 추가하는 방법은 무엇입니까?

HTML에서 드롭 다운을 추가하는 방법은 무엇입니까?

다형성 효과없이 가상 메서드를 호출하는 방법은 무엇입니까?

서버에서 Google지도 마커를로드하는 가장 효과적인 방법은 무엇입니까

드롭 다운 버튼을 사용하여 범위를 표시하는 방법은 무엇입니까?

"편집"링크가 포함 된 드롭 다운 버튼의 xpath를 얻는 방법은 무엇입니까?

버튼의 드롭 다운 메뉴를 왼쪽으로 확장하는 방법은 무엇입니까?

React에서 "react-bulma-components"를 사용하여 드롭 다운 버튼과 드롭 다운 메뉴의 너비를 설정하여 너비가 부모 div를 채우는 방법은 무엇입니까?

탐색 드롭 다운 메뉴를 추가하는 방법은 무엇입니까?

NavBar 호버 드롭 다운 효과를 HTML 및 CSS에서 작동하게하는 방법

드롭 다운 데이터를 한 드롭 다운에서 다른 드롭 다운으로 채우는 방법은 무엇입니까?

이 드롭 다운의 결과를 SQL 테이블에 게시하는 방법은 무엇입니까?

이 호버 효과를 얻는 방법은 무엇입니까?

헤더가 거의없는 드롭 다운에 대해 selectByValue를 수행하는 방법은 무엇입니까?

버튼 클릭시 드롭 다운 메뉴를 여는 방법은 무엇입니까? HTML

버튼 클릭시 폴리머 드롭 다운 메뉴를 채우는 방법은 무엇입니까?

외부 클릭시 마우스 오버 드롭 다운 메뉴를 닫는 방법은 무엇입니까?

드롭 다운과 div를 div 내부에 배치하여 드롭 다운으로 작동하도록하는 방법은 무엇입니까?