Question

CSS 中的是否有可能在从其他元素悬停时更改元素的内容？比方说，例如，我有这个div，A，B，C，D，E，F。当我在B中盘旋时，我想在A中显示一些文本。如果我将鼠标悬停在C中，则会在A中显示不同的文本。其余部分也是如此。所有的变化都发生在A中，当时它们在div到B中徘徊。

Answer 1

目前仅使用CSS无法实现。您可以调整儿童或即将到来的兄弟姐妹的风格。但是你不能设置以前的兄弟姐妹或父元素的样式。

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

<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。

<强>演示

Try before buy

Answer 2

这可以使用通用兄弟选择器~并使用匹配的div与每个悬停的div一起使用。这适用于所有浏览器的最新版本。 http://jsfiddle.net/s8uwu/

HTML

<div id="a">Hello A</div>
<div id="b">Hello B</div>
<div id="c">Hello C</div>
<div id="d">Hello D</div>
<div id="e">Hello E</div>
<div id="text">
    <div class="a">From A</div>
    <div class="b">From B</div>
    <div class="c">From C</div>
    <div class="d">From D</div>
    <div class="e">From E</div>
</div>

CSS

#a:hover~#text .a,
#b:hover~#text .b,
#c:hover~#text .c,
#d:hover~#text .d,
#e:hover~#text .e{
    display: block;
}

#text div{
    display: none;
}

Answer 3

简单地说， CSS（级联样式表）仅用于方便地应用样式/外观 。

因此 根本不会处理网页的内容 。

但是你绝对可以在 JavaScript 的帮助下完成，如下所示 -

<div id="a" onmouseover="document.getElementById('b').innerHTML='ijkl';">abcd</div> <div id="b">efgh</div>

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

3 个答案:

HTML

CSS