CSS之:hover伪类及其跨元素控制技巧

马黑黑

CSS中的hover伪类可以给元素添加动态效果，例如鼠标指针滑过元素时令其背景色发生变化：

<style>
#mydiv {
        width: 300px;
        height: 100px;
        border: 1px solid lightgreen;
}

#mydiv:hover { background: green; }
</style>

<div id="mydiv"></div>

上例，鼠标指针移动到矩形，矩形的背景色会变为绿色，这是 hover 属性做出的效果。

hover伪类除了如上例所示可以控制元素自身的某些属性，它还可以控制其他元素——

一、控制子元素（父对子）

（后续内容请移步 ：CSS之:hover伪类及其跨元素控制技巧 (freeee.ml) ）

马黑黑

红影

去看了，还出现了:has伪类表示，#mama 选择器拥有 #nver 的 :hover 伪类属性。
还有“＋”号能控制的是相邻的哥哥，所以二哥授权用“+”号。弟弟控制大哥要跨越二哥的位置，属于跨位控制，需要大哥用 “~” 符号授权。
越弄越复杂

红影

这一大家子，彼此都有控制权啊

朵拉

马师好，请教：您的小合集 是不是直接复制插件代码就可以了？

马黑黑

红影 发表于 2023-3-26 15:58
去看了，还出现了:has伪类表示，#mama 选择器拥有 #nver 的 :hover 伪类属性。
还有“＋”号能控制的是相 ...

不算复杂吧

马黑黑

朵拉 发表于 2023-3-26 16:07
马师好，请教：您的小合集 是不是直接复制插件代码就可以了？

每一个插件的使用，首先需要复制插件代码。其次，配置一下插件参数，比如希望歌词放在什么地方、播放器又放在什么地方等等。

每一个插件都有使用说明。

马黑黑

红影 发表于 2023-3-26 16:00
这一大家子，彼此都有控制权啊

记住一点：年长者控制年幼者，hover后面不加符号或加 + 和 ~ 符号；反之，需要年长者用 has 授权。

红影

马黑黑 发表于 2023-3-26 16:11
不算复杂吧

需要去记住才好，否则下次见到还是迷糊

红影

马黑黑 发表于 2023-3-26 16:15
记住一点：年长者控制年幼者，hover后面不加符号或加 + 和 ~ 符号；反之，需要年长者用 has 授权。

这个总结性说法真好，便于记忆

马黑黑

红影 发表于 2023-3-27 18:50
这个总结性说法真好，便于记忆

CSS是仿现实生活的，或说是按照现实生活的规则制定规则的

马黑黑

红影 发表于 2023-3-27 18:43
需要去记住才好，否则下次见到还是迷糊

迷糊已经是常态了，没什么大不了

红影

马黑黑 发表于 2023-3-27 19:08
CSS是仿现实生活的，或说是按照现实生活的规则制定规则的

是的，这个理解起来特别方便。

红影

马黑黑 发表于 2023-3-27 19:09
迷糊已经是常态了，没什么大不了

哈哈，还是黑黑宽容

马黑黑

红影 发表于 2023-3-27 21:58
哈哈，还是黑黑宽容

必须的吧

马黑黑

红影 发表于 2023-3-27 21:58
是的，这个理解起来特别方便。

靠谱

红影

马黑黑 发表于 2023-3-27 22:04
必须的吧

遇到我这么迷糊的人，不宽容都没法子

红影

马黑黑 发表于 2023-3-27 22:04
靠谱

用家庭原理带进来，这个全世界都通用。

马黑黑

红影 发表于 2023-3-27 22:35
用家庭原理带进来，这个全世界都通用。

有点道理

马黑黑

红影 发表于 2023-3-27 22:35
遇到我这么迷糊的人，不宽容都没法子

有法子就好了