Here’s a simple one that occurs often. Take for instance, the links on the sidebar of this blog. The links are wrapped in list items, however you’ll notice that you can just as easily click the big list item block as you can the link itself. Additionally, hovering over the list item triggers the hover state of the child link element. Here’s the code used to achieve this.
// Cause the parent list item to function like its child link
// Note we must use window.location as triggering a click event programmatically will not work!
$('li.widget_categories li, li.widget_archives li').click(function() {
window.location = $(this).children('a').attr('href');
});
// When mousing over a list item, we add a class to the child link that imitates its hoverstate.
// Triggering mouse events and the like will only cause recursion errors.
$('li.widget_categories li, li.widget_archives li').mouseenter(function() {
$(this).children('a').addClass('active');
});
// Same as above, only this time we return to normal
$('li.widget_categories li, li.widget_archives li').mouseleave(function() {
$(this).children('a').removeClass('active');
});
// Note we must use window.location as triggering a click event programmatically will not work!
$('li.widget_categories li, li.widget_archives li').click(function() {
window.location = $(this).children('a').attr('href');
});
// When mousing over a list item, we add a class to the child link that imitates its hoverstate.
// Triggering mouse events and the like will only cause recursion errors.
$('li.widget_categories li, li.widget_archives li').mouseenter(function() {
$(this).children('a').addClass('active');
});
// Same as above, only this time we return to normal
$('li.widget_categories li, li.widget_archives li').mouseleave(function() {
$(this).children('a').removeClass('active');
});
Simple stuff here, but that’s about all I seem to ever have time to write down.