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

您不需要使用.parent().parent()

只需使用父课程即可找到该项目。

您的$(this).parent() * 3是$(".multi")

因此，$rotators无法找到.rotator-icons，

您需要再使用一个父母或使用兄弟姐妹

如果没有必要对很多项目做一件事，我建议不要使用课程。

Answer 2

我认为你可以最好地使用数据属性（如果我理解正确的意图）：

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

现在，如果data属性也可以直接用于伪元素的内容，那将会很棒，但这似乎不太可能。并且您无法使用JavaScript定位它们，因此每个图像都必须在样式表中使用nth-of-type()进行定义。

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

2 个答案: