CODEWITHSUNDEEP
htmlcsshover
Vy Le
Vy Le

Reputation: 69

CSS hide div on mouse hover but it is blinking

I just make up this sample html and css to hide a div on mouse hover. However, When I mouse over it, the div is blinking. Please anyone tell me what is going on here and how can i fix it with just css (no java please). Here is a jsFiddle of what I have.

Code Snippet:

        .container{
        border:1px solid gray;
        height:150px;
        width:200px;
        background-image:     url("http://i934.photobucket.com/albums/ad184/giangvy1011/trade_zps7af1d79c.png");
        background-size:100% 100%;
    }

    .description{
        position:relative;
        top:100px;
        height:50px;
        width:200px;
        background:rgba(215,40,40,0.9); 
        color:white
    }
    .description:hover{
        display:none;
    }
<div class='container'>
        <div class='description'>
            This is description
        </div>
    </div>

Upvotes: 4

Views: 4773

Answers (2)

om_jaipur
om_jaipur

Reputation: 2196

When you hover on .description it was hide, In that condition you were not hovered on .description because it was hidden already. Then there was no .description and no mouse hover on that and it was show again, after showing .description once again mouse hover work on it and it happen again and again, and it looks like blinking.

Conclusion is:

you should hover on parent div:

.container:hover .description{
   display:none;
}

One more solution I have found:

.container {
    border:1px solid gray;
    height:150px;
    width:200px;
    background-image: url("http://i934.photobucket.com/albums/ad184/giangvy1011/trade_zps7af1d79c.png");
    background-size:100% 100%;
display:inline-block;
    position:relative;
    
}

.description {
    position:absolute;
    bottom:0px;
    height:50px;
    width:200px;
    background:rgba(215,40,40,0.9); 
    color:white;
    display:inline-block;
    z-index:1;
}
.description-hover {
    position:absolute;
    bottom:0px;
    height:50px;
    width:200px;
    background:none; 
    display:inline-block;
    z-index:2;
}
.description-hover:hover + div {
    display:none;
}
<div class='container'>
    <div class='description-hover'></div>
    <div class='description'>
        This is description
    </div>
</div>

Upvotes: 1

AndrewL64
AndrewL64

Reputation: 16311

Change this:

.description:hover{
    display:none;
}

To this:

.container:hover .description{
    display:none;
}

jsFiddle: https://jsfiddle.net/AndrewL32/dh24urbm/2/

Upvotes: 4

Related Questions