якорь для покрытия IMG при наведении

Question

У меня есть код:

<a class="preview" href="">
    <img class="frame" src="tmp5.png" alt="" />
</a>

a.preview:hover {
    background:red url('../images/icons/preview.png') 0 0 no-repeat;
    display:block;
    height:100%;
    width:100%;
    z-index:40;
}
a.preview:hover img {
    display:block;
    position:relative;
    z-index:10;
}

Изображение также стилизовано под CSS, я просто хочу добавить на якорь задний фон, который будет покрывать изображение.

Мне бы хотелосьпо возможности избегать использования JS.

У кого-нибудь есть предложения?

Answer 1

как:

a.preview:hover img {
    visibility:hidden
}

Answer 2

Хитрость заключается в том, чтобы не покрывать изображение якорем, а добавить (второе?) Изображение ВНУТРИ якоря, которое станет видимым при наведении на якорь. Ваш HTML будет выглядеть примерно так:

<a class="preview" href="">
    <img class="hover" src="/images/icons/preview.png" alt="" />
    <img class="frame" src="tmp5.png" alt="" />
</a>

Однако, чтобы расположить это изображение рядом или над якорем, мы должны сделать его относительным, ваш класс якоря будет выглядеть примерно так:

a.preview:hover {
    position: relative;
    display:block;
    height:100%;
    width:100%;
    z-index:40;
}

Чтобы расположить это новое изображение относительно его родительского якоря, мы добавим ему стиль, в этом случае заставим его отображаться в левой верхней части якоря:

a.preview img.hover {
    position: absolute;
    top:0;
    left:0;
    display: none; /* so it doesn't show by default */
}

И чтобы оно отображалось при наведении на ссылку, мы можем сделать еще один класс наведения для a.preview:

a.preview:hover img.hover {
    display: block;
}

(я добавил этот ответ в надежде, что поисковики получат альтернативный пригодный для использования ответ)