На парящих шоу DIV мерцание

Question

Я сталкиваюсь с очень раздражающей проблемой. У меня есть 2 div, как показано ниже, первый div - это изображение продукта, а второй - наложение, которое должно отображаться, когда пользователь наводит курсор на изображение продукта. Это работает, но когда изображение наведено, наложение не перестает мигать. Я попробовал несколько "хаков", установив непрозрачность, и ничего не работает.

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

URL-адрес http://jsfiddle.net/MZ3eE/ Я знаю, что можно использовать JS, но в этом случае мне нужно чистое решение CSS.

Answer 1

Посмотрев на новую скрипку

тебе нужно сделать это

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

вместо

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

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

Answer 2

Применить :hover в.product-image div вместо img вот так:

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

обновленная скрипка

Answer 3

Для начала есть не закрытое <div> там, так что не совсем уверен, как ты этого хочешь. Во всяком случае, если вы хотите это так:

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

тогда как другие сказали:

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

все будет хорошо. В противном случае, если вы хотите это так (что имеет больше смысла):

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

вы должны положить его на контейнеры :hover как это:

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