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.
<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>
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.
This recipe can be found in it's original form on Stack Over Flow.