好吧,我想做的是让悬停没有背景,除了在悬停期间确实有背景的 。如果你仔细看,我所拥有的,背景是透明的黑色,悬停带来了透明的白色,即 但是它与它背后的透明黑色相冲突。我只想在悬停期间删除背景。
我的 HTML:
<ul class="ui-tab-block">
<li style="height:60px; background: rgba(0,0,0,0.4);"></li>
<li class="ui-prim-nav"> <a href="#home">HOME</a>
</li>
<li class="ui-prim-nav"> <a href="#gallery">GALLERY</a>
</li>
<li class="ui-prim-nav "> <a href="#about">ABOUT</a>
</li>
<li class="ui-prim-nav"> <a href="#contact">CONTACT</a>
</li>
<li style="height:170px; background: rgba(0,0,0,0.4);"></li>
</ul>
这是我的CSS:
body {
background:#c0b896;
}
li {
display:inline;
background:rgba(0, 0, 0, 0.5);
}
.ui-prim-nav a {
padding-right:20px;
color:#FFFFFF;
-o-transition:color .5s ease-out, background 0.5s ease-in;
-ms-transition:color .5s ease-out, background 0.5s ease-in;
-moz-transition:color .5s ease-out, background 0.5s ease-in;
-webkit-transition:color .5s ease-out, background 0.5s ease-in;
transition:color .5s ease-out, background 0.5s ease-in;
}
.ui-prim-nav a:active {
color:black;
background: none;
}
.ui-prim-nav a:hover {
color:black;
background: rgba(255, 255, 255, 0.3);
font-weight:500;
还有我的 JS:
$(".ui-prim-nav").mouseover(function () {
$(this).css('background-color', 'none');
});
这是我的 DEMO
你会注意到,它不是悬停在透明的白色后面,而是更像灰色,因为它与黑色混合。
最佳答案
忘掉 JS,你可以用 CSS 来做,只需将它添加到你的 css 中即可:
li:hover {
background:inherit;
}
如果你想要动画,改变你的 CSS :
li {
display:inline;
background:rgba(0, 0, 0, 0.5);
-o-transition:background 0.5s ease-in;
-ms-transition:background 0.5s ease-in;
-moz-transition:background 0.5s ease-in;
-webkit-transition: background 0.5s ease-in;
transition:background 0.5s ease-in;
}
关于jquery悬停列表背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16350432/