css中的hover怎么用(2)-木庄网络博客

2022-03-27 04:54:51 PHP中文网 JavaScript 百度已收录

（2）控制兄弟元素的样式

‘+’ 控制同级元素（兄弟元素）

<style>
    h1:hover+p{
      background-color: pink;
    }
  </style>
</head>
<body>
  <h1>PHP中文网</h1>
  <p>hover的用法</p>

效果图：

Image 004.png

（3）控制就近元素的样式

‘～’ 控制就近元素

<style>
    h1:hover~p{
      background-color: pink;
    }
  </style>
</head>
<body>
  <h1>PHP中文网</h1>
  <p>hover的用法</p>

效果图：

Image 004.png

总结：以上就是本篇文章的全部内容了，希望对大家有所帮助。

以上就是css中的hover怎么用的详细内容，更多文章请关注木庄网络博客！

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者