我正在使用 jquery 使固定位置的导航栏在向下滑动时淡入 .5
不透明度。这行得通,但我也想让栏回到不透明度 1,如果它被鼠标悬停。我尝试了 CSS :hover
,但没有用。
HTML:
<div id="top-links-bar">
<span class="top-link link-bar-link dropdown-opener" id="learn">Learn <span class="caret"></span></span>
<a style="color:blue;" style="position:relative; right:50px; top:20px;"><span class="top-link link-bar-link" id="login-" >Login <span class="caret"></span></span></a>
<a style="color:blue;" style="position:relative; right:100px; top:20px;"><span class="top-link link-bar-link" id="create-account" >Create an Account</span></a>
</div>
<div id="learn-dropdown" class="dropdown" style="font-weight:bold;">
content
</div>
<div class="dropdown" id="login">
Username: <input type="text"><br>
Password: <input type="password">
</div>
</body>
JS:
$(function () {
$('.dropdown').hide();
$('#learn').click(function () {
$('#learn-dropdown').toggle().css('z-index', '200');
$('#login').slideUp().css('z-index','0');
});
$('#login-').click(function(){
$('#login').toggle().css('z-index', '200');
$('#learn-dropdown').slideUp().css('z-index','0');
});
/* $('body div:not(#top-links-bar)').click(function () {
$('.dropdown').hide();
});*/
$(window).scroll(function () {
if ($(this).scrollTop() > 40) {
$('#top-links-bar').stop().fadeTo('fast', .5);
} else {
$('#top-links-bar').stop().fadeTo('fast', 1);
}
});
});
CSS:
#top-links-bar {
padding:30px;
border:0px solid black;
background: linear-gradient(gray, white);
position:fixed;
top:0px;
width:100%;
z-index:20;
float:none;
clear:none;
}
/*THIS IS WHAT'S NOT WORKING*/
#top-links-bar:hover {
opacity:1;
}
.caret {
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid black;
display:inline-block;
margin-top:5px;
vertical-align:middle;
transition:all 2s;
}
.caret:hover {
border-top:5px solid green;
cursor:pointer
}
.top-link {
font-family:romeral;
color:#1851EE;
padding:30px;
transition:color 2s, background 2s;
}
.top-link:hover {
color:gray;
background:linear-gradient(white, gray);
cursor:pointer;
border-left:1px solid black;
border-right:1px solid black;
}
a {
color:inherit;
}
.dropdown {
font-family:champagnelimo;
background:linear-gradient(gray, green);
z-index:200;
height:150px;
width:100%;
padding:50px;
border:4px solid gray;
position:fixed;
top:100px;
}
ul li:visited {
color:blue;
}
.snippet {
font: bold 12pt/14pt josefin;
}
最佳答案
使用 !important,因为 jquery 更改了 inline style
属性中的 css,所以正常的 css 不会因为优先级而应用,请引用下面的优先级列表以了解工作原理
将此 css 用于悬停
#top-links-bar:hover {
opacity:1 !important;;
}
参见 fiddle Demo
CSS 优先顺序是
!重要
内联
内部
外部
关于jquery 否决 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29594569/