CSS在悬停时从不同元素更改元素内容

CSS change an element content on hover from different element(CSS在悬停时从不同元素更改元素内容)

问题描述

在 CSS 中 是否可以在从不同元素悬停时更改元素的内容?例如，我有这个 div A、B、C、D、E、F.当我将鼠标悬停在 B 中时，我想在 A 中显示一些文本.如果我将鼠标悬停在 C 中，则会在 A 中显示不同的文本.其余的也是如此.将鼠标悬停在 B 到 F 中时，所有更改都发生在 A 中.

Is it possible in CSS to change an element's content when hovered from a different element? Let's say for example, I have this divs A, B, C, D, E, F. I want to show some text in A when I hover in B. a different text will appear in A if I hover over in C. and the same goes for the rest. All the changes takes place in A when hovered in divs B to F.

推荐答案

目前仅使用 CSS 是不可能的.您可以调整孩子或即将到来的兄弟姐妹的风格.但是您不能设置先前兄弟元素或父元素的样式.

Currently this is not possible with CSS only. You can adjust the styles of children or upcoming siblings. But you can't set the styles of previous siblings or parent elements.

所以关于你的情况，你可以这样做:

So regarding your case you could do:

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

CSS

/* next sibling only */
div.a:hover + div.b { /* styles for b when hovering a */ }

/* general sibling selector */
div.a:hover ~ div.c { /* styles for c when hovering a */ }
div.b:hover ~ div.c { /* styles for c when hovering b */ }

你不能走另一条路，例如从 b 到 a.

You can't go the other way, from b to a for example.

演示

先试后买

这篇关于CSS在悬停时从不同元素更改元素内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！