伪类选择器hover应用

来源：互联网发布：淘宝代付不能用花呗吗编辑：程序博客网时间：2024/05/18 00:36

伪类选择器hover 主要是当鼠标悬停在某个元素上时，其样式会根据设定的属性进行变化，一般用于文字或是背景图片的修改；

说多了都是眼泪，直接上代码！

Eg：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>a-day1</title>    <style>        *{            padding: 0;            margin: 0;        }        ul{            height:58px;            width:960px;            margin:60px auto;            list-style: none;        }        ul li{            width:120px;            height:58px;            float:left;        }        ul li a{            display:inline-block;            width:120px;            height:58px;            background:url("img/nav1.png") 0 0 no-repeat;            line-height:58px ;            text-align:center;            text-decoration:none;            color:white;            font-size:14px;        }        ul li a:hover{            background:url("img/nav2.png") 0 0 no-repeat;        }    </style></head><body><ul>    <li><a href="#">点点出效果吧</a></li>    <li><a href="#">点点出效果吧</a></li>    <li><a href="#">点点出效果吧</a></li>    <li><a href="#">点点出效果吧</a></li>    <li><a href="#">点点出效果吧</a></li>    <li><a href="#">点点出效果吧</a></li>    <li><a href="#">点点出效果吧</a></li>    <li><a href="#">点点出效果吧</a></li></ul></body></html>

图片就不发了，主要的效果就是当鼠标悬浮到对应的 a时，其背景图片会发生相应的变化！

1 0