我正在尝试在我的网站上制作一个概述页面，以便当我悬停在概述页面上的一个div上时，该div的不同部分显示不同的图像。本质上是一个幻灯片，但图像会根据光标所在位置而改变。
我已经找到了一些代码来实现我想要的效果，但它使用a href来拉取图片，这意味着如果你点击它，它会跳转到图片的链接。
目前我只有占位符图片，但完成后每个项目都将有特定的项目图片。由于每个div只是一个项目，整个div应该转到一个html链接，而不仅仅是用户悬停在的特定图像的图像链接。
我想要的只是用户单击并转到html链接，而不是img链接。
这是我正在使用的代码：
对于我想要实现的内容，编码熟练的人可能会有更好的解决方案，我很想看到任何更好的解决方案。
HTML
任何帮助都将不胜感激！
谢谢，
马克
我已经找到了一些代码来实现我想要的效果，但它使用a href来拉取图片，这意味着如果你点击它，它会跳转到图片的链接。
目前我只有占位符图片，但完成后每个项目都将有特定的项目图片。由于每个div只是一个项目，整个div应该转到一个html链接，而不仅仅是用户悬停在的特定图像的图像链接。
我想要的只是用户单击并转到html链接，而不是img链接。
这是我正在使用的代码：
对于我想要实现的内容，编码熟练的人可能会有更好的解决方案，我很想看到任何更好的解决方案。
HTML
<div class="multi">
<ul class="rotator-nav fifth clearfix">
<li><a href="/img/FoI.jpg" onclick="return false;" class="img1"></a></li>
<li><a href="/images/card.jpg" onclick="return false;" class="img2"></a></li>
<li><a href="/images/amareal.jpg" onclick="return false;" class="img3"></a></li>
<li><a href="/images/edeva.jpg" onclick="return false;" class="img4"></a></li>
<li><a href="/images/amacover2.gif" onclick="return false;" class="img5"></a></li>
</ul>
<div class="imgcontent">
<ul class="rotator-icons fifth">
<span class="img1 active"></span>
<span class="img2"></span>
<span class="img3"></span>
<span class="img4"></span>
<span class="img5"></span>
</ul>
<img src="/img/FoI.jpg" class="currentimg">
</div>
</div>
CSS
.multi {
display: block;
float:left;
position: relative;
width: 30.8%;
height: 20%;
padding: 0px;
margin:0% 1% 2% 1%;
overflow: hidden;
}
.multi .imgcontent {
display: block;
position: absolute;
top: 0px;
}
.imgcontent img {
display:block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.rotator-nav {
display: block;
position: relative;
width: 100%;
height: 100%;
z-index: 9;
}
.rotator-nav li {
display: block;
float: left;
height: 100%;
}
.rotator-nav.fourth li {
width: 25%;
}
.rotator-nav.fifth li {
width: 20%;
}
.rotator-nav li a {
display: block;
float: left;
width: 100%;
height: 100%;
border-bottom:0px solid #fff
}
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
JS
$(function(){
var $rotators = $('.multi');
var $imglinks = $('.rotator-nav a');
$imglinks.on('mouseenter', function(e){
var imgclass = '.'+$(this).attr('class');
var imglink = $(this).attr('href');
// update main image src
$(this).parent().parent().parent().find('.currentimg').attr('src',imglink);
// update current rotator icon
var $rotators = $(this).parent().parent().parent().find('.rotator-icons');
if($rotators.children(imgclass).hasClass('active')) {
// already active icon -- do nothing
} else {
// remove active class then add to new icon
$rotators.children('span').removeClass('active');
$rotators.children(imgclass).addClass('active');
}
});
});
任何帮助都将不胜感激！
谢谢，
马克