[jQuery] jQuery를 이용한 이미지 오버효과

CSS

.con dl dt { position:relative;}
.con dl dt img.on { position:absolute;opacity:0;top:0;left:0;}

HTML

	

		

			
			
		
		
첫번째내용
	


	

		

			
			
		
		
두번째내용
	


	

		

			
			
		
		
세번째내용
	

jQuery

$(".con dl").hover(function(){
	 var $this = $(this);
	 var $on = $this.find("img.on");
	 $on.stop().animate({"opacity":1}, 450, "swing");
	 $(this).find("dd").css('color','#4a8ef3');
	}, function(){
	 var $this = $(this);
	 var $on = $this.find("img.on");
	 $on.stop().animate({"opacity":0}, 350, "swing");
	 $(this).find("dd").css('color','#1f1f1f');
});