我有以下 jQuery:
var winWidth = 0;
$(window).resize(function() {
winWidth = $(window).width();
$(".home").hover(
function () {
$(".arrow-down").show();
if (winWidth < 900) {
$(".arrow-down").css("left", "70px");
}
else {
$(".arrow-down").css("left", "100px");
}
},
function () {
$(".arrow-down").hide();
}
);
});
基本上,只要鼠标悬停在对象 .home
上,就会显示一个 arrow-down
div。但我还想根据窗口的大小移动 arrow-down
对象。代码工作正常,只出现了一个小问题,我无法找出原因。如果我刷新屏幕,当鼠标悬停在对象 .home
上时,arrow-down
div 不会显示,但如果我调整屏幕大小,则该功能可以完美运行。
我猜测该函数仅在调整屏幕大小时调用,但我不希望这样,我希望在调整屏幕大小之前调用该函数。
如何解决这个问题?
最佳答案
你是对的,你的函数仅在调整大小时调用 - 刷新或加载页面不会触发它。要在两者上触发您的函数,请更改:
$(window).resize(function() { /* your code here */ });
至:
$(window).on("load resize", function() { /* your code here */ });
关于JQuery 悬停问题与窗口大小调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34376301/