jquery悬停列表背景

Posted 2023-03-06

【中文标题】jquery悬停列表背景

【英文标题】：jquery hover list background

【发布时间】：2013-04-27 08:33:31

【问题描述】：

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

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

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

【问题讨论】：

你只是说你想要它完全白色而不是灰色吗？

是的，只是透明的白色而不是白色和黑色

【参考方案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;

【讨论】：

继承...太棒了，我不知道你能做到这一点，而不是一堆