css3中hover的使用细节

首先第一条很重要

元素添加hover伪类选择器时候一定要紧贴这hover,不能有空格,有空格的话会失效

错误例子:

ul :hover{} //ul后面有空格会失效

正确例子:

ul:hover{} // ul会显示出想要的效果

第二

当想要在父元素添加hover在子元素的实现效果
子元素应该写在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>

这个例子中就是当鼠标经过ul的时候,li会在设置的角度旋转

注意

仅可以给自身的子元素设置样式,给其他元素子元素设置无效
接着上个例子举例子:

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

相关推荐