CSS - 使用 :hover 方法与图像混淆答案

【问题标题】：CSS - Confusion using the :hover method with imagesCSS - 使用 :hover 方法与图像混淆
【发布时间】：2012-06-12 15:40:35
【问题描述】：

我对在 CSS 中使用 :hover 方法时的正确做法感到困惑。在此示例中，我有一张照片，在悬停时会更改为另一张照片。据我了解，有两种选择，虽然我不清楚如何完成，哪一种是最佳选择。

选项 1：

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

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

选项 2：

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

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

【问题讨论】：

标签： css hover image

【解决方案1】：

您可以通过多种方式完成此操作：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

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

这种技术称为精灵/精灵。

好处是：

你只有一张图片
浏览器只需发出 1 个 http 请求
鼠标悬停和下一张图片加载之间没有延迟。

【讨论】：

哇听起来很有趣。两张图片是一张在另一张上，还是紧挨着一张有关系吗？
不，没关系。取决于你的情况。如果容器是固定的宽度和高度，那么任何一种方式都可以。

【解决方案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;}

对于第二个选项，问题是在第一次悬停时，由于图像尚未加载，总会有轻微的闪烁。

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

【讨论】：

【解决方案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/

【讨论】：