jquery hover liste fond

Question

Ok, ce que j'essaie de faire est d'avoir un hover pour n'avoir aucun arrière-plan, sauf pour le <un> qui a un arrière-plan pendant le vol stationnaire. Ce que j'ai si vous regardez attentivement, l'arrière-plan est transparent noir et le vol stationnaire apporte un blanc transparent qui est <un> mais il est en conflit avec le noir transparent derrière lui. Je veux juste enlever l'arrière-plan seulement pendant le vol stationnaire.

mon 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> 

ceci est mon 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; 

Et mes JS:

$(".ui-prim-nav").mouseover(function() { 

    $(this).css('background-color', 'none'); 
}); 

Voici mon DEMO

Vous remarquerez que la place de le hover derrière un blanc transparent est plus comme un gris parce qu'il se mélange avec le noir.

Answer 1

Oublie la JS, vous pouvez le faire avec CSS, il suffit d'ajouter ceci à votre css:

li:hover { 
    background:inherit; 
} 

Et si vous voulez que l'animation, les modifications que vous 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; 
}