When hovering over an element with the class .parent, it triggers the application of CSS to child elements with the class .child.
Check out the code on jsFiddle
Can this effect be achieved using only CSS?
Sample HTML:
<div class="parent" style="background:red;margin:20px;padding:20px;">
<div class="child" style="background:blue;margin:20px;padding:20px;"></div>
</div>
<div class="parent" style="background:red;margin:20px;padding:20px;">
<div class="child" style="background:blue;margin:20px;padding:20px;"></div>
</div>
Using jQuery:
$('.parent').hover(
function () {
$(this).find('.child').css('background','yellow');
},
function () {
$(this).find('.child').css('background','blue');
}
);