全部栏目

首页 旅游资讯 线路攻略 景点大全 国内游 境外游 美食特产
您的当前位置：首页正文

css：hover伪类的使用方法

2020-11-27 来源：爱够旅游网

：hover的使用，即当鼠标指针移入元素时，所做出的样式设置

示例一

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <title>demo01</title>
 <style>
 *{
 margin: 0;
 padding: 0;
 }
 ul li{
 width: 300px;
 margin-top: 10px;
 background: #ff0000;
 }
 ul li:hover{
 background: #000000;
 }
 </style></head><body>
 <ul>
 <li></li>
 <li></li>
 <li></li>
 </ul></body></html>

以上情况存在于当鼠标指针移入元素，通过：hover使该元素自身改变新的样式

示例二

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <title>demo01</title>
 <style>
 *{
 margin: 0;
 padding: 0;
 }
 .container{
 width: 300px;
 height: 300px;
 border: 1px solid #ff9f5a;
 }
 .content{
 width: 100px;
 height: 100px;
 background: #27e7ff;
 }
 .container:hover .content{
 background: #000000;
 }
 </style></head><body>
 <p class="container">
 <p class="content"></p>
 </p></body></html>

以上示例中，当存在父子关系的时候，可以通过父级的：hover使得子级的样式发生改变，写法为 .container:hover .content，hover后面有一个空格；但是，子级：hover改变不了父级的样式

示例三

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <title>demo01</title>
 <style>
 *{
 margin: 0;
 padding: 0;
 }
 .container{
 width: 300px;
 height: 300px;
 border: 1px solid #ff9f5a;
 }
 .content{
 width: 100px;
 height: 100px;
 background: #27e7ff;
 }
 .container:hover +.content{
 background: #000000;
 }
 </style></head><body>
 <p class="container"></p>
 <p class="content"></p></body></html>

以上示例，当两个元素不是父子关系，为同胞兄弟关系时，则通过 .container:hover .content这样的写法是无效的，则需要通过“+”号，即 .container:hover +.content才能显示出效果；但是要注意两个元素的先后顺序哦~

显示全文