1

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

选项1：

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

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

选项 2：

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

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

4

4 回答 4

3

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

  1. 滑动背景：您可以将单个图像（并排有两个图像）作为背景，并在父元素悬停时简单地重新定位它。

  2. 绝对定位这两个图像，一个在另一个之上，并在鼠标悬停时隐藏最上面的一个，从而显示第二个。

  3. 将两个图像并排放置在父级中，将溢出设置为 hitten（隐藏第二个图像）。当用户将鼠标悬停在父级上时，隐藏第一个，这会将第二个移动到视图中。

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

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

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

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

于 2012-06-08T14:59:57.347 回答
2

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

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

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

好处是：

  • 你只有一张图片
  • 浏览器只需要发出 1 个 http 请求
  • 鼠标悬停和下一个图像加载之间没有延迟。
于 2012-06-08T14:59:22.357 回答
0

实现选项 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;}

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

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

于 2012-06-08T15:00:20.073 回答
0

您可以通过添加像这样的悬停选择器和最初隐藏项目的类来使其更易于管理：

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/

于 2012-06-08T15:00:22.307 回答