纯CSS实现鼠标悬停显示图片效果的实例分享

下面是“纯CSS实现鼠标悬停显示图片效果的实例分享”的完整攻略：

1.需求分析

我们需要实现当鼠标悬停在某个元素上时，显示相关的图片。

2.准备工作

首先我们需要准备好一些图片资源，把它们准备好。假设我们有以下三张图片：apple.jpg、banana.jpg、cherry.jpg。

3.实现过程

一个比较简单的实现方式是通过伪类:hover来实现。我们可以给需要悬停显示图片的元素加上position:relative样式，并添加一个<span>标签来保存图片地址，然后再通过伪类:hover来控制<span>标签的display属性，决定是否显示图片。具体来说，可以按照以下步骤进行：

步骤一：HTML结构

<div class="fruit-wrap">
  <div class="fruit-item" style="background-image: url('apple.jpg')">
    <span class="fruit-hover-img" style="display:none;">apple.jpg</span>
  </div>
  <div class="fruit-item" style="background-image: url('banana.jpg')">
    <span class="fruit-hover-img" style="display:none;">banana.jpg</span>
  </div>
  <div class="fruit-item" style="background-image: url('cherry.jpg')">
    <span class="fruit-hover-img" style="display:none;">cherry.jpg</span>
  </div>
</div>

以上代码将图片作为背景图设置在每个.fruit-item元素中，并通过.fruit-hover-img元素来保存对应的图片地址。

步骤二：CSS样式

添加以下CSS样式：

.fruit-wrap {
    display:flex;
}
.fruit-item {
    height: 200px;
    width: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    cursor: pointer;
}
.fruit-item:hover .fruit-hover-img {
    display: block;
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 240px;
    height: 240px;
    z-index: 100;
    background-color: white;
    border: 1px solid #ccc;
}
.fruit-hover-img {
    display: none;
}

以上样式维护了图片元素的大小和位置，并通过:hover伪类来判断何时显示对应的图片。.fruit-hover-img元素则维护了图片的显示状态和样式。

步骤三：效果演示

在浏览器中预览效果，悬停在每个元素上时即可看到对应的图片。

4.其他示例

除了以上的方法，还有其他的一些实现方式，下面我们简单介绍一下。

示例一：使用transform样式

使用CSS3的transform样式也可以达到类似的效果。具体来说，可以通过以下步骤实现：

步骤一：

HTML结构同上。

步骤二：

添加以下CSS样式：

.fruit-wrap {
    display: flex;
}
.fruit-item {
    height: 200px;
    width: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: transform 0.3s ease-out;
}
.fruit-item:hover {
    transform: scale(1.2);
    z-index: 2;
}

以上样式通过transform样式来实现图片的放大，从而显示图片。

示例二：实现动画效果

我们也可以使用CSS3动画来实现图片的显示效果。具体来说，可以按照以下步骤进行：

步骤一：

HTML结构同上。

步骤二：

添加以下CSS样式：

.fruit-wrap {
    display: flex;
}
.fruit-item {
    height: 200px;
    width: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    animation: fruitAnim 0.3s forwards;
    animation-fill-mode: forwards;
}
.fruit-hover-img {
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 240px;
    height: 240px;
    z-index: 100;
    opacity: 0;
    background-color: white;
    border: 1px solid #ccc;
    transition: opacity 0.3s ease-out;
}
.fruit-item:hover .fruit-hover-img {
    opacity: 1;
}
@keyframes fruitAnim {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
        z-index: 2;
    }
}

以上样式通过animation实现图片的动画效果，通过opacity来控制图片的显示状态。

5.总结

纯CSS实现鼠标悬停显示图片的效果可以采用伪类:hover、transform、animation等实现方式，其中:hover方式较为简单，transform方式需要较高的浏览器兼容性，animation方式可自定义动画效果。不同方式的实现效果各有不同，需要根据实际需求进行选择。