jquery懸停列表背景

Question

好吧我想要做的是有一個懸停沒有背景，除了<一個>這確實有一個背景在懸停期間。如果您仔細觀察，背景是透明黑色，懸停帶來透明白色，它是<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

你會發現，而不是的在透明白色背後懸停，因爲它與黑色混合，所以更像灰色。

Answer 1

忘掉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; 
}