CODEWITHSUNDEEP
jquerycssbackgroundhover
user2279712
user2279712

Reputation: 81

jquery hover list background

Okay what I'm trying to do is have a hover to have no background except for the <a> which does have a background during hover. What I have if you look carefully, background is transparent black and the hover brings a transparent white which is <a> however it is conflicted with the transparent black behind it. I just want to remove the background only 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 is my 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;

And my JS:

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

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

Here is my DEMO

You will notice that instead of the hover behind a transparent white its more like a grey because its mixing with the black.

Upvotes: 2

Views: 223

Answers (1)

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33880

Forget about the JS, you can do it with CSS, just add this to your css :

li:hover {
    background:inherit;
}

And if you want the animation, change you 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;
}

Upvotes: 1

Related Questions