你的位置:首页 > 软件开发 > 网页设计 > css:hover伪类的使用

css:hover伪类的使用

发布时间:2017-10-19 16:00:09
:hover的使用,即当鼠标指针移入元素时,所做出的样式设置示例一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l ...

: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> <div class="container">  <div class="content"></div> </div></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> <div class="container"></div> <div class="content"></div></body></html>

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

      不足之处,请多多指教…

原标题:css:hover伪类的使用

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。