Timothy van Sas is very good in webdesign, xhtml, css and smooth dancing

RSS FeedEntire block clickable with hover effect

Make an entire block element clickable with a hover effect based on jQuery. With the example i’m showing the hover effect also appears in the all mighty Internet Explorer 6.

Let’s say you have a <ul> and you want to make the whole <li> clickable. You can assign a click function on the <li> and when you click it, the function will find the <a> element and redirect the browser location to its href attribute value. The addClass and removeClass will make sure the hover effect will work in Internet Explorer 6.

jQuery code

		$(function() {
			$(".incg_list li").click(function(){
				window.location=$(this).find("a").attr("href");return false; // href attribute value
			});
			$(".incg_list li").addClass('selected'); // Add a class on the li
			$(".incg_list li").hover(function(){
				$(this).addClass('hover_test'); // Place a extra class when hover
			},function(){
			$(this).removeClass('hover_test'); // Remove a class on mouseout
			});
		});

CSS code

		ul li.selected { 
			display: block; 
			padding: 20px; 
			width: 305px; 
			cursor: pointer; 
			background: #f4f4f4; 
			border: 1px solid #ddd; 
			}
			
			ul li em { display: block; }
			
			ul li.hover_test { background: #ddd; }

HTML code

		<ul class="incg_list">
			<li>
			<a href="http://www.incg.nl"><img src="goh.jpg" alt="Timsterrr" /></a>
			<em>Tering, wat een handsome tosser</em>
			</li>
		</ul>

Take a look at an example Check all articles