Question

在CSS中使用：hover方法时，我对正确练习感到困惑。在这个例子中，我有一张照片，在悬停时，更改为另一张照片。据我所知，有两种选择虽然我不清楚如何完成，哪一种是最佳的。

选项1：

我的HTML中有两张图片。在这个例子中，我应该将它们放在完全相同的位置然后将其隐藏在悬停中吗？

http://jsfiddle.net/C5bKZ/4/

选项2：

我在HTML中创建了一个空div，并使用CSS添加背景图像，然后在悬停时浮动新的背景图像。

http://jsfiddle.net/C5bKZ/9/

Answer 1

有很多方法可以实现这一目标：

滑动背景：您可以将单个图像（并排显示两个图像）作为背景，并在父元素悬停时简单地重新定位。
绝对定位两张图片，一张放在另一张图片的顶部，当鼠标悬停时隐藏顶部图片，从而露出第二张图片。
将两个图像并排放置在父图像中，将溢出设置为打开（隐藏第二个图像）。当用户将鼠标悬停在父节点上时，隐藏第一个节点，将第二个移动到视图中。

使用您发布的第一个示例，您可以添加以下CSS：

.image {
    width:    180px;
    height:   270px;
    overflow: hidden;
}

.image:hover :first-child {
    display:  none;
}

小提琴：http://jsfiddle.net/jonathansampson/C5bKZ/10/

Answer 2

您的选择都是可行的，但就最佳性能而言，如果有可能，我会这样做：

制作一张图像，其中包含两张图像。
仅使用尺寸为一个图像的容器元素。（即这张新图片的一半高度）
然后在:hover更改background-position

这种技术称为spriting / sprites。

好处是：

你只有一张图片
浏览器只需要生成1个http请求
鼠标悬停与下一次图像加载之间没有延迟。

Answer 3

实施选项1的简单方法如下：

<a href="#" class="myLink"><img src="img1.jpg" class="img_on" /><img src="img2.jpg" class="img_off" /></a>

然后css看起来像这样：

.img_off, .myLink:hover .img_on{display:none;}
.myLink:hover .img_off{display:block;}

对于第二个选项，问题是在第一次悬停时，由于图像尚未加载，因此始终存在轻微的闪烁。

我还发现第一个选项更容易维护。

Answer 4

你可以通过在这样的悬停选择器中添加一个最初隐藏项目的类来使其更易于管理：

<强> HTML

<div class="image">
    <img src="http://teamcoding.ca/leisure/wp-content/uploads/2012/06/373036_320675657996371_1880708219_n.jpeg"   id="image1"/>
    <img class="hover" src="http://teamcoding.ca/leisure/wp-content/uploads/2012/06/373040_295769990493061_127804360_n.jpeg"/>
</div>

的 CSS

.image { display: inline; } .image img.hover { display:none; } .image:hover img { display:none; } .image:hover img.hover { display:inline; }

http://jsfiddle.net/hunter/ZHNDU/

CSS - 使用：hover方法与图像混淆

4 个答案: