jquery hover list background

Question

Хорошо, что я пытаюсь сделать, это иметь зависание, чтобы не иметь фона, кроме <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

Вы заметите, что вместо из зависание за прозрачным белым его больше похоже на серое, потому что его смешивание с черным.

Answer 1

Забудьте о JS, вы можете сделать это с помощью CSS, просто добавьте в ваш CSS:

li:hover { 
    background:inherit; 
} 

И если вы хотите анимацию, изменить вам Lī 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; 
}