html通过css 设置鼠标移导航栏发生变化

最新推荐文章于 2024-06-28 09:45:00 发布

wangfei933

最新推荐文章于 2024-06-28 09:45:00 发布

阅读量820

点赞数

分类专栏： hover 导航栏鼠标移入发生变化文章标签： html css

本文链接：https://blog.csdn.net/wangfei933/article/details/117532599

版权

这篇博客介绍了如何使用CSS为HTML导航栏设置鼠标悬停时的样式变化，特别是图片背景的变化。通过:hover伪类，当鼠标指向上时，可以实现元素效果的动态更新。

摘要由CSDN通过智能技术生成

例子

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div {
            float: left;
            width: 125px;
            height: 60px;
            margin-top: 7px;
            background-size: cover;
            font-size: 1em;
            color: #ffffff;
            text-align: center;
            line-height: 45px;
            margin: 10px 2px;
        }
        .aa {
            background-image: url("bg1.png");
        }
        .bb {
            background-image: url("bg2.png");
        }
        .cc {
            background-image: url("bg3.png");
        }
        .dd {
            background-image: url("bg4.png");
        }
      div:hover {
                background-image: url("bg5.png");
        }
        /*
        */
    </style>
</he