Can I handle other elements on hover?

Question

HTML

<div id="first">
    <a>Come here</a>
</div>

<div id=second">
    second div
</div>

CSS

#first a:hover{
    color:green;
    /*i want to do this when hover */
    #second{
        background:green;
    }
}

here, if the user cursor goes to "come here", I want to change another element # of the second background color.

Is it possible to use only css? or do i need to use jquery or javascript event?

Answer 1

#first:hover + #second{
    background: green;
}

http://jsfiddle.net/DerekL/8rJmC/

Use ~if #secondnot immediately after #first.

Note that it is impossible to associate the event :hoverwith adirectly, using only CSS. The code above attaches it to #first.

jQuery, a:

$("#first > a").hover(function(){
    $("#second").css(...);
}, ....);