悬停在相邻元素之外后无法阻止按钮消失
Can't keep buttons from disappearing after hovering out of an adjacent element
我觉得我遗漏了一些明显的东西,但我似乎找不到制作它的最佳方法,所以当您将鼠标悬停在图片上时,图片下方的按钮不会消失。应该发生的是将鼠标悬停在图像上以显示按钮,从而允许您单击它们。悬停在按钮外时,它们才会消失。
我试过使用 mouseenter
和 mouseleave
以及下面显示的内容(我从在线示例中找到的)。我还尝试在图像下方添加更多填充以增加悬停区域,但没有成功。
我觉得自己很蠢,但这让我难住了一整天。
代码笔:https://codepen.io/gojiHime/pen/eKKroR?editors=0111
jQuery:
$(document).ready(function() {
$(".thumb").each(function() {
$(this).hover(
function() {
$learn = $(this)
.parent()
.prev();
$cta = $(this).next();
$learn.stop(true, true).fadeIn();
$cta.stop(true, true).fadeIn();
},
function() {
$learn = $(this)
.parent()
.prev();
$cta = $(this).next();
$learn.stop(true, true).fadeOut();
$cta.stop(true, true).fadeOut();
}
);
});
});
您正在按钮上使用 display:none;
。您将它们隐藏在无法 'hover' 覆盖它们的页面中。而是使用 opacity
来隐藏按钮,同时让您的光标可以访问它们。
您也不必遍历选择器元素,因为 jQuery 已经为您完成了。因此,您可以减少 jQuery 代码。
css
.learn-more {
opacity: 1;
/* your other css */
}
js
$(document).ready(function() {
$('.inner').hover(function() {
$(this).find('.learn-more').css({'opacity':'1'})
}, function(){
$(this).find('.learn-more').css({'opacity':'0'})
});
});
我觉得我遗漏了一些明显的东西,但我似乎找不到制作它的最佳方法,所以当您将鼠标悬停在图片上时,图片下方的按钮不会消失。应该发生的是将鼠标悬停在图像上以显示按钮,从而允许您单击它们。悬停在按钮外时,它们才会消失。
我试过使用 mouseenter
和 mouseleave
以及下面显示的内容(我从在线示例中找到的)。我还尝试在图像下方添加更多填充以增加悬停区域,但没有成功。
我觉得自己很蠢,但这让我难住了一整天。
代码笔:https://codepen.io/gojiHime/pen/eKKroR?editors=0111
jQuery:
$(document).ready(function() {
$(".thumb").each(function() {
$(this).hover(
function() {
$learn = $(this)
.parent()
.prev();
$cta = $(this).next();
$learn.stop(true, true).fadeIn();
$cta.stop(true, true).fadeIn();
},
function() {
$learn = $(this)
.parent()
.prev();
$cta = $(this).next();
$learn.stop(true, true).fadeOut();
$cta.stop(true, true).fadeOut();
}
);
});
});
您正在按钮上使用 display:none;
。您将它们隐藏在无法 'hover' 覆盖它们的页面中。而是使用 opacity
来隐藏按钮,同时让您的光标可以访问它们。
您也不必遍历选择器元素,因为 jQuery 已经为您完成了。因此,您可以减少 jQuery 代码。
css
.learn-more {
opacity: 1;
/* your other css */
}
js
$(document).ready(function() {
$('.inner').hover(function() {
$(this).find('.learn-more').css({'opacity':'1'})
}, function(){
$(this).find('.learn-more').css({'opacity':'0'})
});
});