前端五彩导航，鼠标经过即可变色

陈哈哈��

于 2021-07-22 21:27:12 发布

阅读量1.9k

点赞数 2

分类专栏： HTML 前端文章标签： html5 css

本文链接：https://blog.youkuaiyun.com/qq_55061257/article/details/119009357

版权

本文介绍一种前端实现方法，通过HTML5和CSS技术，让网站导航栏在鼠标经过时立即呈现不同颜色效果，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>综合案例五彩导航</title>

<style>
 .nav a{
     display: inline-block;
     width: 120px;
     height: 58px;
     background-color: pink;
     text-align: center;
     line-height: 48px;
     color: #fff;
     text-decoration:none;
 }

 .nav .bg1{
     background: url(image/bg1.png) no-repeat;
 }
 .nav .bg1:hover{
     background-image: url(image/bg11.png);
 }


 .nav .bg2{
     background: url(image/bg2.png);
 }
 .nav .bg2:hover{
     background-image: url(image/bg22.png);
 }



 .nav .bg3{
     background: url(image/bg3.jpg);
 }
 .nav .bg3:hover{
     background-image: url(image/bg1.png);
 }


 .nav .bg4{
     backg