在 CSS 中，是否可以在鼠标悬停于一个元素时改变另一个元素的内容？例如，我有 divs A、B、C、D、E 和 F。当我在 B 悬停时，我想在 A 中显示一些文本；如果我在 C 上悬停，则会出现不同的文本。其余 div 也是如此。所有更改都发生在从 div B 到 F 悬停时的 A 中。
3个回答
8
目前仅使用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。
演示
- insertusernamehere
3
1你可以使用负边距来解决这个问题吗？ - Ruan Mendes
当然，您仍然可以根据自己的需求进行样式设置，使最后一个兄弟元素出现在第一位，就像@JuanMendes建议的那样。 - insertusernamehere
1我差点发现演示链接丢失了，后来才意识到链接实际上在下一行 :) - user2700358
2
可以使用一般兄弟选择器~，并为每个悬停的
元素配对一个匹配的
元素。这适用于所有浏览器的最新版本。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;
}
- Ruan Mendes
3
2我在评论中发布了一个类似的fiddle（不是指控抄袭，请勿误解）。唯一的问题是，如果文本（如From A等）没有预定义，这种方法将无法工作。如果没有预定义，将随机文本值设置到div中将非常具有挑战性。 - Harry
@Harry，哪里写着你需要随机文本？楼主不想要一个脚本，你需要将文本存储在你的HTML中，或者在CSS中作为insertusernamehere。 - Ruan Mendes
2问题在这方面不是很清楚。这就是我想要表达的。原帖作者应该更明确地解释“某些文本”是什么意思。 - Harry
0
从其名称可以简单地看出，CSS（层叠样式表）仅用于以方便的方式应用样式/外观。
因此，它根本不涉及网页的内容。
但是，您可以通过以下方式使用JavaScript来处理内容-
因此，它根本不涉及网页的内容。
但是，您可以通过以下方式使用JavaScript来处理内容-
<div id="a" onmouseover="document.getElementById('b').innerHTML='ijkl';">abcd</div>
<div id="b">efgh</div>
- Rajesh Paul
6
这不是问题所在。CSS确实可以做到，OP想知道如何实现。 - Ruan Mendes
@JuanMendes 您的答案指出了如何隐藏内容，但没有说明如何更改它。因此，您也没有给出解决方案... - Rajesh Paul
它给人一种变化的外观，这已经足够好了，因为CSS处理外观。 - Ruan Mendes
@JuanMendes 但他问的是如何更改内容。你能回答吗？这不是关于好坏，而是关于他所询问的内容。即使你这样说... - Rajesh Paul
我猜如果你非常关注措辞，那么这是正确的。然而，唯一清楚的是OP想要使用CSS，而不是JS。实际上，inserusernamehere的答案确实改变了CSS的内容。 - Ruan Mendes
1直到昨天我们才学习jQuery。在jQuery上似乎一切都很容易，但我想只使用CSS找出一些东西:D我的想法是分配一个包含文本的变量（文本来自数据库）。所有内容都隐藏在Div A下，并将在悬停时将不透明度设置为100:D - Gibs
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
HTML示例。 - The Alpha