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

73bef5efa77b14fcee2376cc22bb2daf.png

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

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

4d3a47c26c377cc09b78e523d851bc21.png
<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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值