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 doesn't support it，但如果你可以没有IE6（你真的应该，IMO），你应该没事。

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

4 个答案: