2

好的，我想做的是让悬停没有背景，除了 <a> 在悬停期间确实有背景。如果你仔细看，我有什么，背景是透明的黑色，悬停带来一个透明的白色，它是 <a> 但是它与它后面的透明黑色相冲突。我只想在悬停期间删除背景。

我的 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

您会注意到，它不是悬停在透明白色后面，而是更像灰色，因为它与黑色混合。

4

1 回答 1

1

忘记 JS，您可以使用 CSS 来完成，只需将其添加到您的 css 中：

li:hover {
    background:inherit;
}

如果你想要动画，改变你 li 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;
}
于 2013-05-03T02:07:59.673 回答