css3中hover的使用細節


首先第一條很重要

元素添加hover偽類選擇器時候一定要緊貼這hover,不能有空格,有空格的話表示給該元素的所有子元素設置里hover樣式。

錯誤例子:

ul :hover{} //ul的所有子元素設置了hover樣式

正確例子:

ul:hover{} // ul會顯示出想要的效果

第二

當想要在父元素添加hover在指定的子元素的實現效果
子元素應該寫在hover后面空格隔開

<style>
    li{
               width: 100px;
               height: 100px;
               border:1px solid #000;
               transition:transfrom 2s linear;
          }
          ul:hover .one{            // 子元素寫在hover后面空格隔開
               transform:rotateY(90deg);
          }
          ul:hover .two{
               transform:rotateY(0deg);
          }
          ul:hover .thr{
               transform:rotateY(360deg);
          }
</style>
<body>
    <div style="width: 300px;height : 300px; background-color:#ccc"></div>
     <ul>
          <li class="one">di1ge</li>
          <li class="two">di2ge</li>
          <li class="thr">di3ge</li>
     </ul>
</body>

這個例子中就是當鼠標經過ul的時候,li會在設置的角度旋轉

注意

僅可以給自身的子元素設置樣式,給其他元素子元素設置無效
接着上個例子舉例子:

div:hover .one{}  //不顯示任何效果,hover失效

更多技術博客請看:我的個人博客地址 www.blogwxb.cn


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM