호버에서 부트스트랩 드롭다운을 활성화하는 방법은 무엇입니까?

Hover에서 부트스트랩 드롭다운 활성화

드롭다운 메뉴가 있는 Bootstrap navbar에서 기본 onClick 대신 마우스를 올리면 드롭다운을 활성화하려고 합니다. 행동.

사용하는 솔루션 CSS:

이를 달성하는 가장 간단한 솔루션은 CSS를 이용하는 것입니다. CSS 파일에 다음 스니펫을 추가하세요.

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Remove the gap for seamless display */
}

이 CSS 규칙은 상위 드롭다운 위에 마우스를 올리면 드롭다운 메뉴가 블록 요소로 표시되도록 설정합니다. 또한 메뉴가 드롭다운 버튼 아래에 원활하게 표시되도록 초기 여백 상단을 취소합니다.

구현 예:

<!-- Dropdown with onClick behavior -->
<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown">
      Dropdown
    </a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
    </div>
  </li>
</ul>

<!-- Dropdown with onHover behavior using CSS -->
<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown">
      Dropdown
    </a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
    </div>
  </li>
</ul>

CSS 규칙 적용 후자의 드롭다운에서는 마우스를 올리면 활성화되고 첫 번째 드롭다운에서는 onClick 동작이 유지됩니다.

이 CSS에 유의하세요. 솔루션을 사용하려면 드롭다운 메뉴가 드롭다운 상위 요소 내에 일관되게 중첩되어야 합니다.

위 내용은 호버에서 부트스트랩 드롭다운을 활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!