Dual hover-effects for nested list items in CSS


Staff member
I'm trying to get different hover effects for list items.

My list is image and title (both being pulled from wordpress) - I want the background box for the title to change color on hover (parent Li) and an effect applied to the image (I've used opacity in the js fiddle example).

Here's a <a href="http://jsfiddle.net/fabs999/fzUbt/" rel="nofollow noreferrer">jsfiddle</a>

&lt;li id="item" class="item"&gt;
        &lt;a href="#"&gt;&lt;img src="http://placekitten.com/g/200/300"/&gt;&lt;/a&gt;
          &lt;br /&gt;
        &lt;a href="#" class="p_title"&gt;Entry 6&lt;/a&gt;

Situation 1: Hover over the image, everything works as I would like it too.

Situation 2: Hover over the black box only, and you get a different effect.

<strong>I would like Situation 2 result = Situation 1 result.</strong>

I've looked at the following on Stack overflow, but no luck.
<a href="https://stackoverflow.com/questions...when-not-hovering-jsfiddle-link-included?rq=1">link 1</a>
<a href="https://stackoverflow.com/questions/1817575/css-hover-parentchild-items">link 2</a>
<a href="https://stackoverflow.com/questions...nested-list-item-for-a-fade-effect-using-css3">link 3</a>
<a href="https://stackoverflow.com/questions/11675923/hover-on-nested-item-can-affect-its-parent">link 4</a>

Please help!
I thought it was my markup, but I've changed it a few times and that didn't fix it.

Any pointers in the right direction would be appreciated. I was set on CSS-only, but if java script fixes it, then that's great too.