hover on an element to change another

Problem

Can't make it work, I trying to change the style of prevProject & nextProject (text: prev / next) while hover on Proj name1 / Proj name2.

I could do this part, please see the demo.

Demo: http://jsfiddle.net/h2P34/1/

<div id="project-navigation">
    <ul>

        <li id="prevProject" class="subtitle">
            <a href="#"><p>prev</p></a>
            <a id="prev_target_title">Proj name1</a>
        </li>


        <li id="nextProject" class="subtitle">
            <a href="#"><p>next</p></a>
            <a id="next_target_title">Proj name2</a>
        </li>

    </ul>  
</div>
Problem courtesy of: user3772794

Solution

This can't be done in CSS. Your code #prev_target_title:hover ~ #project-navigation ul li#prevProject p will not work because tilde (~) is a general sibling selector. The browser is looking for #project-navigation that follows anywhere after the #prev_target_title when the latter is in the hovered state.

In CSS you cannot select previous siblings and you cannot select parents. The way to solve it is to place prev/next after the project name in the HTML code and then make their order visually different using CSS. Then, you can highlight prev when the project name is hovered.

Solution courtesy of: DRD

Discussion

I would do something like

$("#prev_target_title").hover(function(){
    $("#prevProject a p").css("color","red");
});

$("#prev_target_title").on('mouseleave',function(){
    $("#prevProject a p").css('color','black');
});

But I would also use class names instead of ids

//changing color to red
$(".hoverClass").hover(function(){
    $(this).parent().find("a p").css("color","red");
});

//changing it back to black
$(".hoverClass").on('mouseleave',function(){
    $(this).parent().find("a p").css("color","black");
});

We're using Jquery here, you can't do this with simple css.

Check this fiddle, I hope it helps http://jsfiddle.net/rqg87/

As Jason points out, hover takes 2 arguments - mouseenter and mouseleave... so:

$(".hoverClass").hover(
    function(){ $(this).parent().find("a p").css("color","red"); },
    function(){ $(this).parent().find("a p").css("color","black");}
);

Optimized solution would be: http://jsfiddle.net/P7Zbz/

Discussion courtesy of: brunofitas

This recipe can be found in it's original form on Stack Over Flow.