在兄弟悬停上设置span标记的CSS

Question

嘿，有谁知道我会用纯粹的CSS来完成这个。

<a id="link"><span>Some Text</span></a>
<div id="someDiv"></div>

当someDiv被鼠标悬停时，将跨度“Some Text”设为某种颜色。

不确定这是否可行。 谢谢。

Answer 1

由于CSS选择器的工作方式，以前没有兄弟选择器。 因此，使用现有的标记，您无法使用纯CSS来执行此操作。

如果链接是要来的股利后 ，但是：

<div id="someDiv"></div>
<a id="link"><span>Some Text</span></a>

要使用的选择器是#someDiv:hover + #link span 。

Answer 2

如果你有一个父元素来关联css悬停类，这可能是可能的。 例如：-

<div id="parent">
<div id="someDiv"></div>
<a id="link"><span>Some Text</span></a>
</div>

＆den使用以下css。

#link
{
position:absolute; /*This is to ensure the hover is activated only on the someDiv div & as absolutely positioned elements are removed from the normal flow of the document*/
/*You can position this anchor tag wherever you want then */
}
#parent:hover > link > span
{
color:#000;
/*enter code here/*
}

Answer 3

纯css？ 在所有浏览器中工作？ 在这种结构中不可能。

Answer 4

我认为这应该有效，假设这两个元素共享同一个父元素， a#link是该父元素的第一个子元素。

#parent div#someDiv:hover ~ a#link:first-child span {
   color: blue;
}

IE6不支持它 ，但如果你可以没有IE6（你真的应该，IMO），你应该没事。