当另一个元素纯粹悬停在 css 中时,如何更改一个元素的样式属性?

艾哈迈德

我知道如何在悬停时更改元素的样式,但我想在第一个元素聚焦或悬停时更改另一个元素的样式。

马尼什

这完全取决于您的 HTML 结构。

如果受影响的元素是触发器元素的子元素,则可以使用模式

.[TRIGGER_PARENT_CLASS]:hover .[AFFECTED_CHILD_CLASS]

这种模式可以嵌套任意深。还值得注意的是,您可能希望使用Child 组合器来选择直接子元素。

如果受影响的元素是触发器元素的同级元素,并且触发器元素直接位于受影响的元素之前,则可以使用模式:

.[TRIGGER_CLASS]:hover ~ .[AFFECTED_SIBLING_CLASS]

您可以在这篇 CSS-Tricks 文章中了解有关子级和兄弟级选择器的更多信息

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

悬停在另一个元素上时如何更改元素的CSS元素

将一个元素悬停在另一个元素上时更改其CSS

如何使用css / Extjs将元素悬停在另一个元素上

是否可以通过 CSS 悬停在另一个元素上来更改 img src

CSS - 悬停链接时更改另一个元素的样式?

如何在另一个元素悬停时更改多个元素 css?

CSS::将鼠标悬停在元素上并定位另一个

CSS:将鼠标悬停在另一个元素上

当一个元素悬停并影响CSS中的另一个元素/类时,如何添加悬停效果?

将鼠标悬停在另一个元素上时如何激活 CSS 功能

CSS,将鼠标悬停在一个元素上,影响另一个

将鼠标悬停在另一个元素上方的元素上时,CSS悬停不透明度转换会闪烁

当我将父子元素悬停到另一个父子元素时,CSS问题如何应用更改?

CSS-当它们都属于不同的div时,通过将元素悬停在另一个元素上来影响元素

CSS,悬停一个元素,通过过渡影响另一个元素

将鼠标悬停在一个但会影响另一个CSS

当另一个元素悬停在元素上时更改元素中的文本

CSS-悬停一个元素,更改另一个元素的可见性

悬停另一个元素(ReactJS)时如何更改一个元素的样式?

CSS-将鼠标悬停在另一个悬停上

当将另一个元素悬停在元素上时,如何更改:hover状态?

使用CSS单击另一个元素时如何显示一个元素?

CSS - 如何使光标:悬停在 ReactJS 中作为另一个组件的父组件时的指针?

悬停在一个或另一个上时无法停止所有CSS动画

从另一个CSS文件导入样式元素时如何排除

选择另一个元素时,CSS 悬停将不起作用

CSS 悬停在 div 上以显示另一个 div 不起作用

将CSS悬停在另一个链接上时,使用CSS来使两个链接淡入

如何仅使用CSS在另一个元素的悬停上显示div