커서를 드롭 다운 내 하위 항목으로 이동하는 동안 텍스트 버튼의 CSS 호버 상태를 유지하려고하지만 올바른 해결책을 찾을 수없는 것 같습니까?
커서를 자식 항목 위로 이동하면 부모 항목이 정상 상태로 다시 변경되는 것을 제외하고는 모든 것이 잘 작동합니다.
CSS
.btn-primary {
color: #585a5c;
background-color: #ffffff;
border-color: #ffffff;
font-family:engravers;
font-size:13px;
text-align:center;
text-transform: uppercase;
letter-spacing: 4px;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
color: #585a5c;
background-color: #ffffff;
border-color: #ffffff;
font-family:timesitalic;
font-size:15px;
text-transform: capitalize;
}
HTML
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Gallery Of Images
<!--<span class="caret"></span>--></button>
<ul class="dropdown-menu">
<li><a href="gallery/1.html">ONE</a></li>
<li><a href="gallery/2.html">TWO</a></li>
</ul>
</div>
호버 이벤트에 대한 선택기를 변경하면된다고 생각합니다. 수행하려는 작업을 올바르게 이해 한 경우 다음을 변경해야합니다.
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
color: #585a5c;
background-color: #ffffff;
border-color: #ffffff;
font-family:timesitalic;
font-size:15px;
text-transform: capitalize;
}
이에:
.dropdown:hover .dropdown-toggle.btn-primary {
color: #585a5c;
background-color: #ffffff;
border-color: #ffffff;
font-family:timesitalic;
font-size:15px;
text-transform: capitalize;
}
문제 .btn-primary는 특정 요소 위로 마우스를 가져갈 때만 위의 스타일 세트를 요소에 적용한다는 것 입니다. 즉, 커서를 기본 탐색 항목에서 아래 탐색 메뉴로 가져 가면 .btn-primary:hover더 이상 사실이 아니며 위의 스타일이 적용되지 않습니다.
이 문제를 해결하기 위해 간단한 해결책은 전체 드롭 다운, 즉를 포함하는 상위 .dropdown요소 에 hover 이벤트를 지정하는 것 .dropdown-menu입니다. 대신이 요소에서 hover 이벤트를 사용하는 것은 마우스 .btn-primary오버에서 그 .dropdown-menu아래 탐색 으로 전환 할 때 .dropdown:hover여전히의 하위 요소 위에 마우스를 올려 놓고 있기 때문에 여전히 true임을 의미 .dropdown합니다.
남은 것은 스타일링이 올바른 요소에 영향을 미치므로 .dropdown-toggle.btn-primary마우스 오버 선택기 이후의 타겟팅을 확인하는 것입니다 .
그게 당신이 찾고 있던 것입니까?
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다