javascript - 将鼠标悬停在 div 上时，多个图像取决于鼠标位置

Question

我正在尝试在我的网站上创建一个概览页面，这样当我将鼠标悬停在概览页面上的一个 div 上时，该 div 的不同部分会显示不同的图像。本质上是幻灯片放映，但图像会根据光标所在的位置而变化。

我设法找到了一些代码来完成我想要的，但它使用 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');
    }
  });
});

如有任何帮助，我们将不胜感激!

谢谢，

标记

Answer 1

我认为您最好为此使用数据属性(如果我理解正确的话):

var imglink  = $(this).data('image');

<div class="multi">
  <ul class="rotator-nav fifth clearfix">
    <li>
      <a data-image="/img/FoI.jpg" href="#" class="img1"></a>
    </li>
    <li>
      <a data-image="/images/card.jpg" href="#" class="img2"></a>
    </li>
    <li>
      <a data-image="/images/amareal.jpg" href="#" class="img3"></a>
    </li>
    <li>
      <a data-image="/images/edeva.jpg" href="#" class="img4"></a>
    </li>
    <li>
      <a data-image="/images/amacover2.gif" href="#" class="img5"></a>
    </li>
  </ul>

...

如果您仍然希望在原始 div 上看到图像，可以使用伪元素。优点是它们不是实际的 DOM 元素，不会注册点击:

Demo

现在，如果数据属性也可以直接用于伪元素的内容，那就太好了，但这似乎不可能。而且您不能使用 JavaScript 来定位它们，因此每个图像都必须在样式表中另外使用 nth-of-type() 定义。