아이콘과 링크가있는 측면 탐색 모음 목록이 있습니다. a 태그 위로 마우스를 가져 가면 마우스 오버가 켜지지 만 아이콘은 켜지지 않습니다. 아이콘은 태그가 아닌 아이콘 위에 직접 마우스를 올려 놓을 때만 켜집니다. 링크 위로 마우스를 가져 가면 아이콘이 켜지 길 원합니다. 내 아이콘에 활성 클래스를 추가하기 위해 jQuery를 사용했습니다. 기본 아이콘 (표시 등 없음)과 활성 아이콘 (호버 표시 등)이 있습니다. jQuery에서 i를 제거 li>a하고 아이콘이 켜지지 않는 경우.
CSS
.nav.nav-main {
background: #293041;
}
.nav.nav-main li > a {
color: #aaccff;
font-size: 14px;
font-weight: 300;
padding: 10px 20px;
}
.nav.nav-main li > a i {
margin-right: 10px;
}
.nav.nav-main li > a span {
padding-top: 3px;
overflow: hidden;
}
.nav.nav-main li > a.active,
.nav.nav-main li > a:hover {
background: #374356;
color: #ffffff;
}
jQuery
$(".nav.nav-main li>a>i").hover(
function () {
$(this).addClass('active');
},
function () {
$(this).removeClass('active');
}
);
햄
%ul.nav.nav-main.nav-sidebar
%li{:role => "presentation"}
%a{ href: 'javascript:void(0)' }
%i.pull-left.fu.fu-lg.fu-alumni
%span.pull-right.badge.badge-warning 1
Alumni
CSS 방식도 작동하지만이 솔루션을 사용할 것입니다.
$(".nav.nav-main li").hover(
function () {
$(this).find('i').addClass('active');
},
function () {
$(this).find('i').removeClass('active');
}
);
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다