First, it is important first
Element to hover pseudo-class selectors when we must close this hover , can not have spaces , spaces words will fail
Error examples:
ul :hover{} //ul后面有空格会失效
Correct example:
ul:hover{} // ul会显示出想要的效果
second
When you want to add hover in the parent element in achieving the effect of sub-elements
child elements should be written on the back separated by a space hover
li{
width: 100px;
height: 100px;
border:1px solid #000;
transition:transform 2s linear;
}
ul:hover .one{ // 子元素写在hover后面空格隔开
transform:rotateY(90deg);
}
ul:hover .two{
transform:rotateY(0deg);
}
ul:hover .thr{
transform:rotateY(360deg);
}
</style>
</head>
<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>
This case is the time when the mouse passes ul, li will rotate the angle settings
note
Only give the sub-element itself disposed style elements to other sub-elements disposed invalid
then the sub Examples example:
div:hover .one{} //不显示任何效果，hover失效