Minghui Yu Minghui Yu - 6 months ago 13
CSS Question

CSS on hover image blinking issue

I tried to make a simple CSS hover but got a blinking image issue. Is there something I can do to fix that?

In the meantime, there is a empty gap between a

H3
title and
.term-image
class because of my CSS settings for a class (
.term-desc
). Is there a way to eliminate this gap? It appears that the gap created by
position:relative
is not easy to be removed.

I need to hide the image when mouse hovers.

http://jsfiddle.net/fveqkcnj/

<div class="categorywrapper">
<div class="views-row views-row-1 views-row-odd views-row-first">
<h3 class="term-title">
<a href="/categories/arts-culture">Arts &amp; Culture</a>
</h3>

<div class="term-desc">
<p>This is Arts &amp; Culture</p>
</div>
<div class="term-image"> <a href="#"><img src="http://placehold.it/235x150/ffffee" /></a>

</div>
</div>




.categorywrapper {
width: 720px;
clear:both;
}
.categorywrapper .views-row {
float:left;
position:relative;
width:235px;
}
.categorywrapper .views-row h3 {
position:relative;
margin-left:30px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
width:80%;
min-height:38px;
}
.categorywrapper .views-row .term-desc {
position:relative;
top:100px;
left:20px;
width:200px;
}
.categorywrapper .views-row .term-image {
position:relative;
}
.categorywrapper .views-row .term-image:hover {
z-index:-2;
}

Answer

Add to your css: pointer-events:none; in the .categorywrapper .views-row .term-desc

Basically the result is:

.categorywrapper .views-row .term-desc {
    pointer-events:none;
    position:relative;
    top:100px;
    left:20px;
    width:200px;
}

Additionally you use a negative z-index on your hover element which means it goes behind the parent elements and triggers the mouseout event which turns off the hover.

You can fix that by instead of applying the following css to the row instead of the image:

.categorywrapper .views-row:hover .term-desc {
    z-index:2;
}

Here is the JSFiddle

If you want it over the image do the same but put the .term-desc element inside the tag.

Comments