懸停在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

您不需要使用.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元素，不會記錄點擊次數：

演示

現在，如果data屬性也可以直接用於偽元素的內容，那將是很好的，但這似乎是不可能的。 並且您不能使用JavaScript來定位它們，因此每個圖像都必須在樣式表中使用nth-of-type()進行定義。