The issue is that you cannot do that with CSS only.
While you use CSS selectors to select the element, the selectors cannot select the parent element, in other words, you cannot reverse the element in any ways...
Either you can select the child element or an adjacent element using +
So, in your case
<h2><a> link </a></h2>
<ul class='tools'>
<li> tool 1 </li>
</ul>
When you use .tools li:hover
, now you cannot select any other element outside the li
, you can select the adjacent li
on hover of first li
or you can select any child element to li
.
So once you go ahead selecting elements, there is no way you can select the previous element if on the same level, nor you can select the parent element, nor you can select the adjacent element to the parent.
If you want to accomplish this, you can use Javascript or jQuery to do so.
As you are now open to jQuery solution, you can use
$("ul.actions li").hover(function(){
$(this).parent().prev().find('a').toggleClass("hover");
});
Here in the above code, am first targeting li
using this keyword, than, am looking for its parent element which will select ul
, then am using .prev()
to look for an previous sibling element, and at the end we use .find('a')
to target the a
element nested inside h2
If you want the only CSS way, than the best thing you can do is to wrap the h2
and ul
in a single element, say a div
element with a class
say .wrapper
than you can use a selector like
.wrapper:hover h2 a {
color: red;
}