CSS Hover Selector - JS or Jquery solution

Question

I've something like this:

<article class="leading-0">
    <h2>
        <a href="link">link title</a>
    </h2>
    <ul class="actions">
        <li class="print-icon">
            <a ...><img...></a>
        </li>
        <li class="email-icon">
            <a ...><img...></a>
        </li>
    </ul>
    <dl class="article-info">
        <dt class="article-info-term">...</dt>
        <dd class="hits">...</dd>
    </dl>
    <p>...</p>
</article>

When you hovers the li in ul.tools I want to style the h2 element.

I would be happy if any one could help and to see if this is possible or not.

I remember doing it once before, but cant remember it.

Answer 1

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

Demo

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

Demo

Answer 2

you need to use the + operator, here is an example: http://jsfiddle.net/TheBanana/JaEGF/

#div1:hover + #div2{
   background:green;
}

Answer 3

Try this CSS code:

article ul.tools li:hover{
    color:green;
}   
article h2 { 
    color:red;  
}