/*setup of variables and functions to be used*/
function clear(){ //set up a function to hide all pop-outs
$('.foo').each(function(){
$(this).next('.subfoo').hide()});}
var popoutHover = false; //initialize switch variable for following function:
$('.subfoo').mouseenter(function(){
popoutHover = true;}); //Set the variable to 'true' if the mouse is hovering over a pop-out
$('.subfoo').mouseleave(function(){
popoutHover = false; //Set the variable to 'false' and hide pop-outs if the mouse leaves
clear();
});
/*The main functionality*/
$('.icon').hoverIntent(function(){ //Hover over the icon for a link
clear(); //Hide open pop-outs
$(this)
.closest('.foo') //Select the link next to the icon
.siblings('.subfoo') //Select the pop-out for the link
.slideDown(240)}, //Open the pop-out
function(){//If the mouse leaves the icon
if (!popoutHover){ //And it is not hovering over a pop-out
$(this)
.closest('.foo') //Select the link
.siblings('.subfoo') //Hide the pop-out
.hide()}}
);
2条答案
按热度按时间72qzrwbm1#
可以使用Multiple Selector语法
JQuery add方法
4uqofj5v2#
我在这里开发的脚本是一个链接列表,每个链接都有一个弹出窗口,其中包含有关该链接的更多信息。这个问题的目的是弄清楚如何通过将鼠标悬停在图标上来打开弹出窗口,并且在鼠标离开图标并进入弹出窗口之后使其保持打开。
部分困难在于同一页面上有许多相同类型对象的示例,因此解决方案必须是通用的,并触发最接近悬停图标的弹出窗口。
HTML:
JavaScript:
这里有一个快速的小提琴,因为它可能比我现在能解释的更好:https://jsfiddle.net/kuzvgqkz/1/