如何使用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("");
});