Javascript 将鼠标悬停在div上时，根据鼠标位置显示多个图像

我试图在我的网站上做一个概览页面，这样当我在概览页面上的div上悬停时，该div的不同部分会显示不同的图像。基本上是幻灯片，但图像会根据光标的位置而变化

我已经设法找到一些代码，做我想要的，但它使用了一个a href拉在图像这意味着，如果你点击它，它会转到图像的链接

目前，我只是在占位符图像，但当完成每一个将有特定的项目图像中。由于每个div将只是一个项目，所以整个div应该指向一个html链接，而不仅仅是用户悬停在上面的图像的特定图像链接

我只想让用户点击，它就会转到一个html链接，而不是img链接

以下是我正在使用的代码：

对于我想要实现的目标，那些精通编码的人可能会有一个更好的解决方案，我有兴趣看到任何更好的解决方案

HTML

JS

任何帮助都将不胜感激

谢谢

---

标记您不需要使用

.parent（）.parent（）

只需使用父级的类来查找项目

您的

$（this.parent（）

*3是

$（“.multi”）

因此，您的

$rotators

无法找到

.rotator图标

您需要使用一个或多个父级或同级

---

如果不需要对很多项执行一件事，我建议不要使用类。

我认为最好使用数据属性来实现这一点（如果我正确理解其意图）：

...

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

---

现在，如果data属性也可以直接用于伪元素的内容，那就太好了，但这似乎是不可能的。你不能用JavaScript将它们作为目标，因此每个图像都必须在样式表中另外定义

nth-of-type（）

。

你能提供一个JSFIDLE吗？这让我很吃惊-你不能直接在

中有span标记，
的子图像必须是
• （然后你可以在
• 中有span）。我也支持JSFIDLE的请求。这非常有效，非常感谢您的帮助！哇，我原以为这里或那里可能需要一些调整。一气呵成是很少见的。很高兴我能帮忙，谢谢你的跟进。

       <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>
  

  .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%; }
  

  $(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');
      }
    });
  });
  

  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>
  
  ...