首先第一條很重要
元素添加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