HTML中，使用hover属性完成鼠标悬停切换图片效果

HTML中经常需要完成这样的一个效果：鼠标悬停切换图片：效果如下：

sparksflyer

25392人浏览 · 2021-06-02 18:41:14

sparksflyer · 2021-06-02 18:41:14 发布

HTML中经常需要完成这样的一个效果：鼠标悬停切换图片：效果如下：

页面最初显示的时候：为下列五张图片：

当鼠标移动到第一张图片的时候，第一张图片将会切换为另外一张图片，结果如下：

实现这一个效果的方式有两种：一种使用JavaScript编写鼠标悬停事件函数，这是实际编程中比较常用的，在初学前端的时候，暂时不会使用，如果有了一定的基础，则使用JavaScript编写事件要更加合理一些。第二种是使用CSS的关键点:hover属性来完成。

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: #fff;
            text-align: center;
            line-height: 48px;
            color: #fff;
            text-decoration: none;
        }
        .nav .bg1 {
            background: url(img/bg1.png)no-repeat;
        }
        .nav .bg1:hover{
            background-image: url(img/bg5.png);
        }
        .nav .bg2 {
            background: url(img/bg2.png)no-repeat;
        }
        .nav .bg2:hover{
            background-image: url(img/bg6.png);
        }
        .nav .bg3 {
            background: url(img/bg3.jpg)no-repeat;
        }
        .nav .bg3:hover {
            background-image: url(img/bg1.png);
        }
        .nav .bg4 {
            background: url(img/bg3.png)no-repeat;
        }
        .nav .bg4:hover {
            background-image: url(img/bg5.png);
        }
        .nav .bg5 {
            background: url(img/bg4.png)no-repeat;
        }
        .nav .bg5:hover {
            background-image: url(img/bg6.png);
        }
    </style>

</head>
<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
        <a href="#" class="bg5">五彩导航</a>
    </div>
</body>
</html>

代码解释：首先：为了方便表示：CSS使用的是内部类样式表；大致的思路是：先定义一个最外层的div，在div中加入图片，本代码中：每一张图片在网页中都是一个超链接标签a，再使用CSS，给超链接标签a添加背景图片，使用超链接的hover属性，完成鼠标悬停时，切换图片（实际就是切换了背景图片）。

样式表中：使用的类选择器和标签选择器的结合,样式表中第一行 .nav a{定义的样式内容}，定义的是使用了类nav的div中，所有的a标签的统一样式。其中：display:inline-block的作用稍微复杂，但是是必须的。它将原本为行元素的超链接标签，转换为块元素，再设置为悬浮表示。若不清楚的话，可以先了解一下块元素和行元素的区别。由于图片的大小，所以这里的宽高设置也是很重要的。需要提前知道图片的宽高。

然后，对于每一个具体的标签a，他们的悬浮图片应该是不一样的，所以需要单独定义他们的鼠标未悬浮时的背景图片，以及悬浮时的背景图片。所以，只需要设置好.nav.bg1和它的属性.nav.bg1:hover，即可完成单个悬浮图片的制作，再将bg1引入到超链接中，就可以看到结果。后面的几张图片也是一致的。

由于图片素材并不关键，使用任何素材都可以完成这个制作，只需要根据你使用的图片改一下第一个.nav.a的宽高，即可正常运行。

如果觉得本文对你学习HTML和CSS有所帮助的话，麻烦点个赞再走吧！