CSS基础（11.hover实用实例）

来源：互联网发布：redis同步数据库c# 编辑：程序博客网时间：2024/05/29 08:40

这里结合了以前的很多知识，做出一个不错的实例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .header{            position: fixed;            right: 0;            left: 0;            top: 0;            height: 48px;            background-color: goldenrod;            line-height: 48px;        }        .body{            margin-top: 50px;        }        .w{            width: 980px;            margin: 0 auto;        }        .header .menu{            display: inline-block;            padding: 0 10px 0 10px;            /*上右下左*/            color: white;        }        /*将鼠标移动的当前标签上时，下面的CSS属性才生效*/        .header .menu:hover{            background-color: green;        }    </style></head><body><div class="header">    <div class="w">        <a class="logo">选项</a>        <a class="menu">选项</a>        <a class="menu">选项</a>        <a class="menu">选项</a>        <a class="menu">选项</a>    </div></div><div class="body">        <div class="w">内容</div></div></body></html>

这里做了一个菜单

当你的鼠标移动到选项的时候，就是这样：

阅读全文

0 0