On hover show DIV flicker

问题

I am facing very annoying problem. I have 2 div's like bellow, first div is product image, and second one is overlay that should be shown when user hovers over product image. It does work, but when image is hovered, overlay doesnt stop flickering. I tried few "hacks" by setting opacity and nothing works.

<div class="product-container">
        <div class="product-image"><img src="http://placehold.it/200x200">  
        <div class="overlay">PRICE</div>
</div>

URL is http://jsfiddle.net/MZ3eE/ I know JS could be used, but in this case i need pure CSS solution.

回答1:

After looking at the new fiddle

you need to do this

.product-container:hover .overlay-box {
    display: block;
}

instead of

.product-img-box:hover + .overlay-box {
    display: block;
}

http://jsfiddle.net/avxLA/1/

回答2:

Apply the :hover to the .product-image div instead of the img like so:

.product-image:hover .overlay {
    display:block;
}

updated fiddle

回答3:

For starters, there is an unclosed <div> there, so not quite sure how you want it. Anyway if you want it like this:

<div class="product-container">
        <div class="product-image">
            <img src="http://placehold.it/200x200">
            <div class="overlay">PRICE</div>
        </div>
</div>

then like others said :

.product-image:hover .overlay {display:block;}

will do fine. Otherwise if you want it like that(which makes more sense tbh):

<div class="product-container">
    <div class="product-image"><img src="http://placehold.it/200x200"></div>
    <div class="overlay">PRICE</div>
</div>

you should put it on the containers :hover like that :

.product-container:hover .overlay {display:block;}

来源：https://stackoverflow.com/questions/24678877/on-hover-show-div-flicker

标签

css

hover

flicker