我有一个 js 库,当我将鼠标悬停在缩略图上时,页面上会显示一个大图像。但是,如果我单击拇指,它将在新页面中打开大图像。
谁能告诉我如何删除点击功能,只保留悬停效果?
这是我的js:
$(document).ready(function(){
$('#thumbs ul li a').hover(
function() {
var currentBigImage = $('#bigpic img').attr('src');
var newBigImage = $(this).attr('href');
var currentThumbSrc = $(this).attr('rel');
switchImage(newBigImage, currentBigImage, currentThumbSrc);
},
function() {}
);
function switchImage(imageHref, currentBigImage, currentThumbSrc) {
var theBigImage = $('#bigpic img');
if (imageHref != currentBigImage) {
theBigImage.fadeOut(250, function(){
theBigImage.attr('src', imageHref).fadeIn(250);
var newImageDesc = $("#thumbs ul li a img[src='"+currentThumbSrc+"']")
.attr('alt');
$('p#desc').empty().html(newImageDesc);
});
}
}
});
还有我的 HTML:
<body>
<div id="thumbs">
<ul>
<li>
<a rel="http://..." href="http://...">
<img src="http://..." alt="Ring 1" />
</a>
</li>
<li>
<a rel="http://..." href="http://...">
<img src="http://..." alt="Ring 2" />
</a>
</li>
</ul>
<ul>
<li>
<a rel="http://..." href="http://...">
<img src="http://..." alt="Ring 7" />
</a>
</li>
<li>
<a rel="http://..." href="http://...">
<img src="http://..." alt="Ring 8" />
</a>
</li>
</ul>
</div>
<div id="bigpic"><img src="http://..." alt="First Main Image" />
<p id="desc">Move your mouse over the images on the left to view here...</p>
</div>
</body>
</html>