2022-01-26 hover的常见几种用法_hover的用法-优快云博客

本文介绍了CSS中hover伪类选择器的多种用法，包括：鼠标悬停时影响子元素样式、相邻兄弟元素样式变化、不相邻兄弟元素样式变化，以及解释了子节点无法通过hover控制父节点样式的情况。示例代码详细展示了各种应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0.锚伪类选择器

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */

a:hover {color: #FF00FF}	   /* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

其中,

:vistied和:link是a标签专用的锚伪类选择器
:hover 和:active可以用于所有元素

一.hover的常见用法

1.父子节点:鼠标悬停在当前元素时,其子元素样式变化

语法

父节点:hover 子节点

示例

html

  <div id="app">
    <div class="one">1111</div>
    <div class="two">2222</div>
  </div>

    #app{
      background: pink;
    }
    #app:hover .one{
      color:white;
    }

效果

鼠标移入时,文字1111颜色发生变化

2.相邻兄弟节点:鼠标移动到当前元素时,其相邻节点样式变化

语法

兄弟节点一:hover+兄弟节点二

示例1

    /* #app:hover .one{
      color:white;
    } */
    .one:hover+.two{
      color:white;
    }

示例2:

//html
  <div id="app">
    <div class="one">1111</div>
    <div class="two">2222</div>
  </div>
  <div id="app2">
    <div class="three">3333</div>
    <div class="four">4444</div>
  </div>
  
//css
  #app:hover+#app2{
    color:blue;
  }
  #app:hover+#app2 .three{
    background-color: red;
  }

3.不相邻节点:兄弟节点改变另一兄弟节点样式

语法

兄弟节点一:hover ~ 不相邻兄弟节点二

示例

  <style>
   #app{
      background: pink;
    }
    .one:hover~.four{
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="one">1111</div>
    <div class="two">2222</div>
    <div class="three">3333</div>
    <div class="four">4444</div>
  </div>
</body>