클릭 대신 마우스 오버 시 Twitter Bootstrap 드롭다운이 표시되도록 하려면 어떻게 해야 합니까?

Twitter Bootstrap 메뉴 드롭다운을 트리거하는 마우스 오버

Twitter Bootstrap을 사용하는 경우 클릭을 요구하는 대신 마우스를 올리면 메뉴 드롭다운이 자동으로 표시되도록 할 수 있습니다. . 이는 CSS 수정을 통해 달성됩니다.

마우스를 올리면 드롭다운을 활성화하려면 숨겨진 메뉴 옵션에 대한 선택기를 대상으로 지정하세요. 예를 들어 Twitter Bootstrap 페이지의 샘플을 사용하는 경우:

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

그러나 반응형 기능을 사용하는 경우 작은 화면에서 탐색 표시줄이 축소될 때 이 기능을 제외하는 것이 좋습니다. 위 코드를 미디어 쿼리에 포함합니다.

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

드롭다운 화살표 제거

화살표(캐럿)를 숨기려면 드롭다운 토글 앵커에서 제거하세요. 요소(Twitter Bootstrap 버전에 따라 다름):

• Bootstrap 3: 요소에서 HTML 를 제거합니다.
• Bootstrap 2 이하: CSS를 사용하여 :after 의사 요소를 대상으로 지정하고 스타일을 지정합니다.

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

이러한 개념이 어떻게 작동하는지 이해하고 필요에 따라 동작을 맞춤설정하기 위해 코드를 실험해 보세요.

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