Question

我正忙着一个项目，当鼠标在图像上时，图像会改变视角，跟随鼠标位置。

HTML

    <a href=""><div class="one spot-area">
      <img class="thumbnail add1" id="extrema_outdoors_thumbnail" src="images/projects/ExtremaOutdoors/thumbnail/575x300.png" alt="extrema_outdoors_thumbnail">
    </div></a>

    <a href=""><div class="two spot-area">
      <img class="thumbnail add2" id="extrema_outdoors_thumbnail" src="images/projects/ExtremaOutdoors/thumbnail/575x300.png" alt="extrema_outdoors_thumbnail">
    </div>
  </a>

  <a href=""><div class="three spot-area">
    <img class="thumbnail add3" id="extrema_outdoors_thumbnail" src="images/projects/ExtremaOutdoors/thumbnail/575x300.png" alt="extrema_outdoors_thumbnail">
  </div>
</a>

<a href=""><div class="four spot-area">
  <img class="thumbnail add4" id="extrema_outdoors_thumbnail" src="images/projects/ExtremaOutdoors/thumbnail/575x300.png" alt="extrema_outdoors_thumbnail">
</div>
</a>

我使用的两种变体

  var spotAreaElem = document.getElementsByClassName("spot-area"),
      spotPerspectiveElem = document.getElementsByClassName("spot-perspective"),

切换课程

$(".add1").hover(function () {
    $(this).toggleClass("spot-perspective");
});

$(".add2").hover(function () {
    $(this).toggleClass("spot-perspective");
});

$(".add3").hover(function () {
    $(this).toggleClass("spot-perspective");
});

$(".add4").hover(function () {
    $(this).toggleClass("spot-perspective");
});

因此，当我将鼠标悬停在第一张图片上时，它的效果很好。当我尝试将鼠标悬停在新图像上时，似乎spot-perspective没有切换新图像和旧图像。

但是当我滚动并将鼠标放在新图像上时，它会在两个图像上切换。之后出现同样的问题。

非常感谢任何帮助。

Answer 1

$.toggleClass只有a）添加或b）删除每个函数调用的类。您需要再次手动调用切换以在添加后删除该类。

mouseleave事件可用于检测鼠标何时离开。

// The function that will call the toggle. 
// This will add or remove the class based on if it present or not.
function toggleSpotPerspective(){
    $(this).toggleClass("spot-perspective");
}

$(".add1").mouseenter(toggleSpotPerspective).mouseleave(toggleSpotPerspective);
$(".add2").mouseenter(toggleSpotPerspective).mouseleave(toggleSpotPerspective);
$(".add3").mouseenter(toggleSpotPerspective).mouseleave(toggleSpotPerspective);
$(".add4").mouseenter(toggleSpotPerspective).mouseleave(toggleSpotPerspective);

Toggle Class结合Spot.js更改透视图

1 个答案: