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函数，这有点巧合（我当时在想“也许它已经消失了”，它确实起作用了），其想法是在悬停时在它们之间进行切换。

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

from jsonschema import validate

one_param = {
    "type": "object",
    "properties": {
        "param1": {
            "type": "string",
        }
    },
    "required": ["param1"]
}

both_params = {
    "type": "object",
    "properties": {
        "param1": {
            "type": "string",
        },
        "param2": {
            "type": "string",
        }
    },
    "required": ["param1", "param2"]
}

test_schema = {
    "type": "object",
    "properties": {
        "request": {
            "oneOf": [
                {
                    "type": "object",
                    "properties": {
                        "topic": one_param,
                        "message": one_param
                    },
                    "required": ["topic", "message"]
                },
                {
                    "type": "object",
                    "properties": {
                        "topic": both_params,
                        "message": both_params
                    },
                    "required": ["topic", "message"]
                }
            ],
        }
    }
}

good_1 = {
    "request": {
        "topic": {
            "param1": "bleep beep",
            "param2": "bloop boop"
        },
        "message": {
            "param1": "bleep beep message",
            "param2": "bloop boop message"
        }
    }
}

good_2 = {
    "request": {
        "topic": {
            "param1": "bleep beep"
        },
        "message": {
            "param1": "bleep beep message"
        }
    }
}

bad_1 = {
    "request": {
        "topic": {
            "param1": "bleep beep",
        },
        "message": {
            "param1": "bleep beep message",
            "param2": "bloop boop message with no matching topic"
        }
    }
}

bad_2 = {
    "request": {
        "topic": {
            "param1": "bleep beep",
            "param2": "bloop boop topic with no matching message"
        },
        "message": {
            "param1": "bleep beep message"
        }
    }
}

validate(good_1, test_schema)  # should validate
validate(good_2, test_schema)  # should validate
validate(bad_1, test_schema)  # should fail
validate(bad_2, test_schema)  # should fail

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]);
};

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("");
});

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

2 个答案: