改变鼠标指针外观_两小时学会CSS-鼠标交互

最新推荐文章于 2024-09-06 12:28:09 发布

weixin_39548805

最新推荐文章于 2024-09-06 12:28:09 发布

阅读量289

点赞数

文章标签：改变鼠标指针外观

CSS :hover选择器交互效果样式改变鼠标悬浮

关键词由CSDN通过智能技术生成

:hover 选择器用于选择鼠标指针浮动在上面的元素，改选择器是CSS1
鼠标移出元素，交互效果失效。
要点:

鼠标放在哪个元素上，:hover选择器前面即是该元素
哪个元素的样式发生改变， :hover选择器后面就是样式改变的这个元素
理清选择器前后两个的元素关系
哪个元素的样式会发生改变，过渡效果就加到该元素上。

<style>   
* {     
    margin: 0, 0; 
}  
    
body {    
     background: #000;    
 }  
    
.container { 
        background: #eee;  
   }      
.container div {       
  width: 100px;    
  height: 100px; 
  background-color: orange;    
 }  
   
em{         
   font-size: 20px;         
   font-weight: bold;        
   display: inline-block;         
   width: 100px;
   height: 100px; 
   background: orangered;  
 }   
/**      
1. 鼠标放在哪个元素上，:hover选择器前面即是该元素   
2. 哪个元素的样式发生改变， :hover选择器后面就是样式改变的这个元素     
 */     
 .container:hover span{ 
         font-size: 24px;
  } 
  /**        
鼠标放在container 下的子div上时， 设置邻近的P标签字体大小20px. 字体颜色红色 
        设置i 标签钉钉字体样式为 normal,字体大小为36px;       
*/ 
.container>div:hover +p{ 
         font-size: 20px; 
         color: red;
    }      
.container>div:hover ~i{
     font-style: normal;
     font-size: 36px;
                
} 
</style>
  <body>    
 <div class="container">
         <div> 
            div标签
           <br> 
            <span>span</span> 
        </div> 
        <p>p标签</p> 
        <em>em标签</em>
         <i>i标签</i>
      </div> 
</body>