클릭 대신 호버에 부트스트랩 드롭다운이 표시되도록 하려면 어떻게 해야 합니까?

클릭하는 대신 드롭다운을 위해 부트스트랩 메뉴 위로 마우스를 가져가기

Twitter의 부트스트랩 프레임워크를 사용할 때 기본적으로 메뉴 옵션은 사용자가 드롭다운 메뉴로 나타납니다. 제목을 클릭하세요. 그러나 사용자가 제목 위로 마우스를 가져가면 메뉴가 자동으로 드롭다운되도록 이 동작을 수정할 수 있습니다.

호버 드롭다운에 대한 CSS 사용자 정의

드롭다운 메뉴에서 CSS를 활용하여 기본 설정을 재정의할 수 있습니다. 적절한 CSS 선택기는 다음과 같습니다.

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}

이 코드는 관련 목록 항목(li.dropdown)이 다음과 같을 때 숨겨진 드롭다운 메뉴(ul.dropdown-menu로 표시)가 블록 요소로 표시되도록 합니다. 마우스를 올려보세요.

드롭다운 화살표 숨기기

활성화하는 것 외에도 호버 기능을 사용하려면 메뉴 제목 옆에 나타나는 작은 화살표(캐럿)를 숨길 수 있습니다. 적절한 단계는 사용 중인 Bootstrap 버전에 따라 다릅니다.

Bootstrap 3

드롭다운 토글 앵커 요소에서 다음 HTML 코드를 제거하세요.

<b>caret</b>

부트스트랩 2 및 낮추기

아래 CSS 선택기와 코드를 활용하여 화살표를 대상으로 지정하고 제거하세요.

a.menu:after, .dropdown-toggle:after {
    content: none;
}

이러한 CSS 수정을 구현하면 다음을 허용하여 Bootstrap 메뉴의 유용성을 향상시킬 수 있습니다. 사용자가 드롭다운 옵션에 더욱 편리하게 액세스할 수 있습니다.

위 내용은 클릭 대신 호버에 부트스트랩 드롭다운이 표시되도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!