Hover effect on the parent of an anchor tag

It ever happened that you need to apply some CSS style to the parent of a link ( anchor tag <a href=””></a> ), when the link is hovered ?

For example this HTML:

<div>
   <a href="#">Some Link</a>
</div>

you want to apply some styles to the <div> ( some background color for example ), and you can achieve this by using some ugly css selectors, but sure you will stumble upon some cross-browser problems, so you better use some simple jQuery manipulation.

$('a').mouseover(function (){
	$(this).parent().addClass('hover');
}).mouseout(function (){
	$(this).parent().removeClass('hover');
});

and now you can use the .hover class to style the <div>.

Leave a Reply

Your email address will not be published. Required fields are marked *

16 + = 18

This site uses Akismet to reduce spam. Learn how your comment data is processed.