CSS在不同元素上更改悬停时的元素内容 [英] CSS change an element content on hover from different element

问题描述

是否有可能在CSS 中从一个不同的元素悬停时更改元素的内容？比方说，例如，我有这个div A，B，C，D，E，F。当我将鼠标悬停在B中时，我想在A中显示一些文本，如果我将鼠标悬停在C中，则会在A中显示不同的文本。剩下的也一样。所有的变化都发生在A的时候，在B到B的范围内。

解决方案

目前，这只适用于CSS。您可以调整儿童或即将到来的兄弟姐妹的风格。但你不能设置以前的同胞或父母元素的样式。

因此，对于你的情况你可以这样做：

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

CSS
< pre $ / *下一个兄弟只有* /
div.a：hover + div.b {/ *当b盘旋a时的样式* /}

/ *一般兄弟选择器* /
div.a：hover〜div.c {/ *用于悬停a时的c样式* /}
div.b：hover〜div.c {/ *样式for c when悬停b * /}


您不能以其他方式从<$ c例如$ c> b 至 a 。

strong>

先试后买

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.

解决方案

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 */ }

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

Demo

Try before buy

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