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

最新推荐文章于 2025-06-01 09:59:50 发布

原创

最新推荐文章于 2025-06-01 09:59:50 发布 · 2.6w 阅读

141 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

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;