如何使用jQuery检查鼠标是否远离元素？

Question

我正在处理我的投资组合。 这个想法是当我悬停图像时，该图像正在淡出，而一些文本正在淡入。 当你离开文本时，过程会以另一种方式进行。 这项工作完美，这是代码。

var cardImgTop = ['.card-img-top-0', '.card-img-top-1', '.card-img-top-2', '.card-img-top-3', '.card-img-top-4', '.card-img-top-5', '.card-img-top-6', '.card-img-top-7', '.card-img-top-8', '.card-img-top-9', '.card-img-top-10', '.card-img-top-11'];

/* the var hiddenPara is not displayed with css rules */
var hiddenPara = ['.hidden-para-0', '.hidden-para-1', '.hidden-para-2', '.hidden-para-3', '.hidden-para-4', '.hidden-para-5', '.hidden-para-6', '.hidden-para-7', '.hidden-para-8', '.hidden-para-9', '.hidden-para-10', '.hidden-para-11', ];

function showHideProject(param1, param2) {
  $(param1).hover(function() {
    $(param1).fadeOut();
    $(param1).hide(function() {
      $(param2).fadeIn(function() {
      });
    });
  })

  $(param2).mouseleave(function() {
    $(param2).fadeOut();
    $(param2).hide(function() {
      $(param1).fadeIn(function() {
      });
    });
  });
};

for (i = 0; i < cardImgTop.length && i < hiddenPara.length; i++) {
  showHideProject(cardImgTop[i], hiddenPara[i]);
};

我的问题是，当你悬停的速度非常快时（想象一下你有 4 张图片并排并且你从左到右疯狂地快速悬停） hiddenPara 保持显示，并且 cardImgTop 不再显示。 我想要，没关系，当在该 hiddenPara 上未检测到鼠标时，它会保持隐藏状态，并且 cardImgTop 保持显示状态。

我尝试了很多组合，使用 mousemove 等等，但到目前为止还没有任何效果......

你会向我推荐什么？ 当然，我仍在挖掘中:)

非常感谢你的帮助。

Answer 1

因此，我已经找到了解决方法。

我添加了包含所有div的第三个参数。 这是一张来自引导程序的卡片，因此顶部有图像，而主体位于正下方。 而且我在jQuery中添加了stop函数，这有点巧合（我当时在想“也许它已经消失了”，但是它确实起作用了）。这个想法是在悬停时在它们之间进行切换。

对我来说，这几乎是完美的，但是如果您有任何改进的想法，我非常有兴趣学习！ 因此，这意味着如果您从左向右快速移动，甚至不会出现文本，但是图像会短暂闪烁。 如果您只是正常地悬停，则会产生效果。 感谢您的帮助，这里是代码:)

 var cardImgTop = ['.card-img-top-0', '.card-img-top-1', '.card-img-top-2', '.card-img-top-3', '.card-img-top-4', '.card-img-top-5', '.card-img-top-6', '.card-img-top-7', '.card-img-top-8', '.card-img-top-9', '.card-img-top-10', '.card-img-top-11']; var hiddenPara = ['.hidden-para-0', '.hidden-para-1', '.hidden-para-2', '.hidden-para-3', '.hidden-para-4', '.hidden-para-5', '.hidden-para-6', '.hidden-para-7', '.hidden-para-8', '.hidden-para-9', '.hidden-para-10', '.hidden-para-11',]; var cardPortfolio = ['.cp0', '.cp1', '.cp2', '.cp3', '.cp4', '.cp5', '.cp6', '.cp7', '.cp8', '.cp9', '.cp10', '.cp11'] function showHideProject(param1, param2, param3){ $(param3).hover( function(){ $(param1).fadeOut(300, function(){ $(param1).hide(); $(param2).fadeIn(300).stop(); }); }, function(){ $(param2).fadeOut(300, function(){ $(param2).hide(); $(param1).fadeIn(300).stop(); }); }); }; for(i = 0; i < cardImgTop.length && i < hiddenPara.length && i < cardPortfolio.length; i++){ showHideProject(cardImgTop[i], hiddenPara[i], cardPortfolio[i]); }; 

 <div class="container-fluid container-protfolio"> <div class="row"> <div class="card-deck"> <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12"> <div class="card card-portfolio border-0 bg-transparent cp11"> <img data-src="images/image.jpg" class="card-img-top card-img-top-11" alt="..."> <div class="card-body border-0 bg-transparent hidden-para-11"> <h3 class="text-light">Project name</h3> <p class="text-light">Project description</p> <a class="btn" href="http://path">View project</a> </div> </div> </div> <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12"> <div class="card card-portfolio border-0 bg-transparent cp10"> <img data-src="images/image.jpg" class="card-img-top card-img-top-10" alt="..."> <div class="card-body border-0 bg-transparent hidden-para-10"> <h3 class="text-light">Project name</h3> <p class="text-light">Project description</p> <a class="btn" href="http://path">View project</a> </div> </div> </div> <!-- more comes here, there is actually 12 --> </div> </div> 

Answer 2

我曾经做过类似的事情。 我改用mouseout（）和mouseover（）。 也许对您有帮助。

$("#img_1").mouseover(function () {
  $(this).css("filter", "blur(3px)");
  $(".left").text("Home");
  $(".left").css("font-size", "22px");
});

$("#img_1").mouseout(function () {
  $(this).css("filter", "blur(0px)");
  $(".left").text("");
});