不使用背景图像的纯CSS图像悬停 [英] Pure CSS Image Hover Without Using Background Images

问题描述

我正在尝试在悬停/翻转时更改纯CSS图像，而不使用背景图像。到目前为止，我有一个图像，当您将鼠标悬停在该图像上时，会出现另一幅图像。这是CSS：

I'm trying to make a pure CSS image change on hover / rollover without using background images. So far I have one image and when you rollover that image, another image appears. Here is the CSS:

#hidden {
display: none;
}

#visible:hover + #hidden {
display: block;
}

因此，当您将鼠标悬停在 #visible div，出现 #hidden div。这是jsFiddle： http://jsfiddle.net/MNyzd/1/

So, when you rollover the #visible div, the #hidden div appears. Here is the jsFiddle: http://jsfiddle.net/MNyzd/1/

这很好用，但这并不是我想要完成的。我想交换图像。因此，当您将鼠标悬停在 #visible 上时，它应该消失，而不是保持可见状态。我的第一个最初想法是将 #visible div悬停在 display：none 上（ #visible：hover display：none; ），但这不起作用。

This works great, but it is not exactly what I want to accomplish. I would like the images to swap. So when you rollover #visible, it should disappear instead of remaining visible. My first initial idea was to make the #visible div to display:none on hover (#visible:hover display:none;), but this did not work.

所以没有人知道我将如何成功解决这个问题进入传统的图像悬停/交换使用这种方法？任何帮助将不胜感激，再次，这是jsFiddle ... http://jsfiddle.net/MNyzd/1 /

So does anyone have any idea how I would successfully turn this into a traditional image hover / swap using this method? Any help would be appreciated and again, here is the jsFiddle... http://jsfiddle.net/MNyzd/1/

推荐答案

使用在其中进行悬停的容器：

Use a container where you do the hover on:

http://jsfiddle.net/MNyzd/8/

.hidden {
    display: none;
}

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

.container:hover .hidden {
    display: block;
}

另请参见以下答案：通过CSS：悬停（如果需要，也可以是JS）隐藏/显示内容

这篇关于不使用背景图像的纯CSS图像悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！