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 중국어 웹사이트의 기타 관련 기사를 참조하세요!