主題推薦(P3)

四、下方選單滑鼠靠近時產生縮圖

結果

var $li = $('.title li').hover(
	function(){$(this).addClass('over').siblings('.over').removeClass('over');}
	,function(){$(this).removeClass('over');})
	.click(function(){
		$(this).add($('.AD div').eq($(this).index()))
            .addClass('on').siblings('.on').removeClass('on');
	});

//點選下方照片,即顯示照片		
var $li = $('.title li').hover(
	function(){$(this).addClass('hover').siblings('.hover').removeClass('hover');
				var hoverIndex = $(this).index();
				var himgSrc = $('.AD div').eq(hoverIndex).find('img').attr('src');
				$(this).prepend('<img src="'+himgSrc +'" alt="" class="hoverliimg" />');
	}
	,function(){$(this).removeClass('hover');
				$(this).children().remove('img');		
	})
	.click(function(){
		$(this).add($('.AD div').eq($(this).index())).addClass('on').siblings('.on').removeClass('on');
	});
.AD .title li {position:relative;}

.AD  .hoverliimg{ width:200px; height:100px; position:absolute; left:0; top:-102px;
 			box-shadow:-1px 1px 30px #000000; border:1px solid #000000; border-radius:5px;}
 /*行動裝置CSS美化=============================================*/
@media screen and (max-width:1024px){

.AD   .hoverliimg{ display:none;}

}