关于悬停另一个元素的问题

Question

I'm trying to make an effect on:

Hover the image > change the link below's color

But I can't make it work properly. I can only make this effect work if I target the whole first container .clearfix , but how can I make it work in a way that only if I hover the img and not the whole .clearfix element, will change the link's color?

 .clearfix:hover > ba { color:red; } 

 <li class="clearfix"> <div class="zitem"><a href="#"><img class="recent_thumb" src="http://lorempixel.com/270/142/sports"/></a></div> <b><a href="#">Random Title text</a></b> <br> </li> 

I've also tried these:

.clearfix:hover + b a { ... }
.clearfix:hover ~ b a { ... }

But it doesn't seem to work or do anything... maybe I'm doing it wrong.

Answer 1

Try this

.zitem:hover + b a {
    color:red;
}

div with zitem class and <b> element are sibling so sibling selectors (adjacent + or general ~) will work on these.

Answer 2

This will sought out your problem---

.zitem:hover + b a {
    color:#ff0000;
}