Question about css hover

When mouse hover element 1 can i change css of element 2.

Here is an example:

<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;
}

you need to write +

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

jsFiddle example

w3 ref

edit: in CSS3 there's a "General sibling combinator" (~) that can help you do the same even if the second header isn't immediately after the first - works in FF and Opera (as tested so far)

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

You can use adjacent sibling selectors.

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

see here