CSS中hover的使用细节

曾经终败给现在 2023-03-02 04:59 18阅读 0赞

### 首先第一条很重要 ###

元素添加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失效

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS-TRICKS 中标题 hover 看到的问题的注意

CSS-TRICKS。

墨蓝/ 2024年05月24日 03:13/ 0 赞/ 64 阅读

相关移除jQuery中的CSS Hover效果

CSS的:hover伪类是用来在鼠标悬停在元素上时应用样式的。然而，有时候我们希望移除这个效果，即当鼠标悬停在元素上时不应用样式。在jQuery中，我们可以使用一些方法来实现这

秒速五厘米/ 2024年02月27日 02:39/ 0 赞/ 84 阅读

相关 CSS: hover选择器的使用详解

目录前言统一代码： 1、对当前元素改变 2、当存在多个子元素时，只对其中一个进行改变 . 3、当存在多个子元素时，对所有的进行改变

快来打我*/ 2023年06月28日 11:22/ 0 赞/ 4 阅读

相关 CSS中hover的使用细节

首先第一条很重要元素添加hover伪类选择器时候一定要紧贴hover，不能有空格，有空格的话表示给该元素的所有子元素设置里hover样式错误例子： ul

曾经终败给现在/ 2023年03月02日 04:59/ 0 赞/ 19 阅读

相关 css hover控制其他元素

<html> <body> <style> a:hover {color : FFFF00;} a:hover > b:

曾经终败给现在/ 2023年02月18日 03:24/ 0 赞/ 25 阅读

相关学习使用jQuery中的hover方法

学习使用jQuery中的hover方法定义和用法语法实例定义和用法 hover() 方法规定当鼠标指针悬停在被选元

Love The Way You Lie/ 2022年09月10日 10:22/ 0 赞/ 177 阅读

相关 css hover出现文字,hover显示文字

Simple Tile Hover Effect .tiles \{ width: 1040px; font-size: 0; text-align: center;

矫情吗；*/ 2022年09月02日 14:52/ 0 赞/ 387 阅读

相关 css3 :hover添加特效

为改变hover动画效果，可以为hover添加transition 增加过度效果 1、第一种写法（事件前有动画效果）： <style> body{ padd

亦凉/ 2022年08月22日 05:53/ 0 赞/ 447 阅读

相关 css的hover不生效

<style type="text/css"> .btn-operation:hover\{ background-color: red; \} </style

朱雀/ 2022年06月17日 07:21/ 0 赞/ 521 阅读

相关 css 小细节

1、div 里的文字在没有设置 margin padding 的情况有一点距离：如图：左图片和右文字之间没有设置距离但有一点间隔 ![Image 1][] 解决方法：给父级

柔光的暖阳◎/ 2022年05月29日 10:22/ 0 赞/ 241 阅读