css - jquery hover list background -

okay i'm trying have hover have no background except <a> have background during hover. have if carefully, background transparent black , hover brings transparent white <a> conflicted transparent black behind it. want remove background during hover.

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

this css:

body {     background:#c0b896; } li {     display:inline;     background:rgba(0, 0, 0, 0.5); } .ui-prim-nav {     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; 

and js:

$(".ui-prim-nav").mouseover(function () {      $(this).css('background-color', 'none'); }); 

here demo

you notice instead of hover behind transparent white more grey because mixing black.

forget js, can css, add css :

li:hover {     background:inherit; } 

and if want animation, change 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; }