关于css悬停的问题

Question

当鼠标悬停元素1可以改变元素2的css时。

以下是一个例子：

<h1 id="text1">Text1</h1>
<h1 id="text2">Text2</h1>

#text1
{
    color:Green;
}

#text1:hover -> #text2  What i must write here??
{
    color:Red;
}

#text2
{
    color:Gray;
}

Answer 1

你需要写+

#text1:hover+#text2 {
    color: red;
}

jsFiddle example

w3 ref

修改 在CSS3中有一个“General sibling combinator”（~）可以帮助你做同样的事情，即使第二个标题不是紧接在第一个之后 - 在FF和Opera中工作 （目前已测试）

HTML：

<h1 id="text1">text1</h1>
<p>paragraph 1</p>
<p>paragraph 2</p>
<h1 id="text2">text2</h1>

的CSS：

#text1:hover ~ #text2 {
    color: red;
}

jsFiddle Example

Answer 2

您可以使用adjacent sibling selectors。

#text1:hover + #text2
{
    color:Red;
}

请参阅here