Javascript 鼠标悬停在div面板上时，按住该面板_Javascript_Jquery_Html_Css

Javascript 鼠标悬停在div面板上时，按住该面板

javascript jquery html css

Javascript 鼠标悬停在div面板上时，按住该面板,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我一直在制作一个在mousemove上显示的div，并在一段时间后隐藏起来。我已经实现了上述目标我已附上下面的代码- var nav=$'.nav'； var movementTimer=null； var$doc=$document； $doc.on'mousemove'，function e{ 导航添加类“显示”； }; $doc.on'mousemove'，function e{ clearTimeoutmovementTimer； movementTimer=setTimeoutfu

我一直在制作一个在mousemove上显示的div，并在一段时间后隐藏起来。我已经实现了上述目标

我已附上下面的代码-

var nav=$'.nav'； var movementTimer=null； var$doc=$document； $doc.on'mousemove'，function e{ 导航添加类“显示”； }; $doc.on'mousemove'，function e{ clearTimeoutmovementTimer； movementTimer=setTimeoutfunction{ nav.removeClassshow； }, 500; } .导航{ 背景：111人；文本对齐：居中；颜色：fff；填充顶部：20px；垫底：20px；位置：固定；右：0px；底部：-100px；左：0px；过渡：.4s易进易出； } .导航秀{ 底部：0px；转换：.2s易进易出； } 这是一个有趣的导航

这是你想要的吗？我刚刚分别用mouseover和mouseout替换了这些方法，而不是mousemove。

更新的小提琴：这是你想要的吗？我刚刚分别用mouseover和mouseout替换了这些方法，而不是mousemove。更新的fiddle:

您只需使用.mouseenter事件来保持div，使用.mouseleave事件来释放div。对于您的上下文，代码应该如下所示

var nav = $('.nav');
var movementTimer = null;

var $doc = $(document);


$doc.on('mouseenter', function(e) {
nav.addClass('show');    
});

$doc.on('mouseleave', function(e)
    {
        clearTimeout(movementTimer);
        movementTimer = setTimeout(function()
        {
            nav.removeClass("show");
        }, 500);
    })

您只需使用.mouseenter事件来保持div，使用.mouseleave事件来释放div

var nav = $('.nav');
var movementTimer = null;

var $doc = $(document);


$doc.on('mouseenter', function(e) {
nav.addClass('show');    
});

$doc.on('mouseleave', function(e)
    {
        clearTimeout(movementTimer);
        movementTimer = setTimeout(function()
        {
            nav.removeClass("show");
        }, 500);
    })

只需检查e.target下的target元素是否具有类nav

看看这把小提琴：

var nav=$'.nav'； var movementTimer=null； var$doc=$document； $doc.on'mousemove'，function e{ 导航添加类“显示”； }; $doc.on'mousemove'，function e { clearTimeoutmovementTimer；如果！$e.target.hasClassnav{ movementTimer=setTimeoutfunction { nav.removeClassshow； }, 500; } } 身体{ 字体系列：helvetica neue、helvetica、arial、无衬线字体；高度：8000px； } .导航{ 背景：111人；文本对齐：居中；颜色：fff；填充顶部：20px；垫底：20px；位置：固定；右：0px；底部：-100px；左：0px；过渡：.4s易进易出； } .导航秀{ 底部：0px；转换：.2s易进易出； } 这是一个有趣的导航

只需检查e.target下的target元素是否具有类nav

看看这把小提琴：

var nav=$'.nav'； var movementTimer=null； var$doc=$document； $doc.on'mousemove'，function e{ 导航添加类“显示”； }; $doc.on'mousemove'，function e { clearTimeoutmovementTimer；如果！$e.target.hasClassnav{ movementTimer=setTimeoutfunction { nav.removeClassshow； }, 500; } } 身体{ 字体系列：helvetica neue、helvetica、arial、无衬线字体；高度：8000px； } .导航{ 背景：111人；文本对齐：居中；颜色：fff；填充顶部：20px；垫底：20px；位置：固定；右：0px；底部：-100px；左：0px；过渡：.4s易进易出； } .导航秀{ 底部：0px；转换：.2s易进易出； } 这是一个有趣的导航

您可以从更新JS代码

$doc.on('mousemove', function(e) {
 nav.addClass('show');    
 });

$doc.on('mousemove', function(e)
 {
    clearTimeout(movementTimer);
    movementTimer = setTimeout(function()
    {
        nav.removeClass("show");
    }, 500);
})

到

也不要一次又一次地使用var来获得最佳实践。

您可以从

$doc.on('mousemove', function(e) {
 nav.addClass('show');    
 });

$doc.on('mousemove', function(e)
 {
    clearTimeout(movementTimer);
    movementTimer = setTimeout(function()
    {
        nav.removeClass("show");
    }, 500);
})

到

也不要为了最佳实践而反复使用var。

您需要收听导航条的mouseover和mouseout事件。签出工作代码

var nav=$'.nav'； var movementTimer=null； var$doc=$document；功能显示导航{ $doc.off'mousemove'，showNav； nav.addClassshow； movementTimer=setTimeoutautoHide，500； } 函数自动隐藏{ nav.removeClassshow； $doc.on'mousemove'，showNav； } $doc.on'mousemove'，showNav； $'.nav'。在“鼠标悬停”上，函数E{ clearTimeoutmovementTimer； e、停止传播； } $'.nav'。在'mouseout'上，函数E { $doc.on'mousemove'，showNav； } 身体{ 字体系列：helvetica neue、helvetica、arial、无衬线字体；高度：8000px； } .导航{ 背景：111人；文本对齐：居中；颜色：fff；填充顶部：20px；垫底：20px；位置：固定；右：0px；底部：-100px；左：0px；过渡：.4s易进易出； } .导航秀{ 底部：0px；转换：.2s易进易出； } 这是一个有趣的导航

您需要收听导航条的mouseover和mouseout事件。签出工作代码

var nav=$'.nav'； var movementTimer=null； var$doc=$document；功能显示导航{ $doc.off'mousemove'，showNav； nav.addClassshow； movementTimer=setTimeoutautoHide，500； } 函数自动隐藏{ nav.removeClassshow； $doc.on'mousemove'，showNav； } $doc.on'mousemove'，showNav； $'.nav'。在“鼠标悬停”上，函数E{ clearTimeoutmovementTimer； e、停止传播； } $'.nav'。在'mouseout'上，函数E { $doc.on'mousemove'，showNav； } 身体{ 字体系列：helvetica neue、helvetica、arial、无衬线字体；高度：8000px； } .导航{ 背景：111人；文本对齐：居中；颜色：fff；填充顶部：20px；垫底：20px；位置：固定；右：0px；底部：-100px；左：0px；过渡：.4s易进易出； } .导航秀{ 底部： 0px；转换：.2s易进易出； } 这是一个有趣的导航在这里，我只是在mousemove函数中添加了mouseenter和mouseleave。并删除了class.show，如果.nav具有class show

.nav.show，.nav:hover应该做到这一点，使规则在两种情况下都适用。nav.show，.nav:hover应该做到这一点，使规则在两种情况下都适用。我甚至不知道这两种情况与我的答案相反，你知道mouseenter和mouseover之间有什么区别吗，mouseleave和mouseout？MouseOver：在进入一个元素时，以及在该元素内发生任何鼠标移动时，将触发。MouseEnter:在输入元素时将触发。当鼠标指针离开任何子元素以及所选元素时，将触发Mouseeut事件。mouseleave事件只有在鼠标指针离开所选元素时才会触发。我想要的是，只有当我将鼠标移到div上或将鼠标悬停在div上时，它才会保持不变。在你的解决方案中，即使鼠标移动停止，div也会保持不变。因此，如果你能以某种方式改进解决方案-@SudharsanWasn甚至没有意识到这两个问题，而不是我的答案，你知道mouseenter和mouseover之间有什么区别吗，mouseleave和mouseout？MouseOver：在进入一个元素时，以及在该元素内发生任何鼠标移动时，将触发。MouseEnter:在输入元素时将触发。当鼠标指针离开任何子元素以及所选元素时，将触发Mouseeut事件。mouseleave事件只有在鼠标指针离开所选元素时才会触发。我想要的是，只有当我将鼠标移到div上或将鼠标悬停在div上时，它才会保持不变。在您的解决方案中，即使鼠标停止移动，div也会保持不变。因此，如果您能以某种方式改进解决方案-@sudharsan这可能比我或@sudharsan-s给出的答案在计算上更昂贵，有人确定吗？@SworrubWehttam我认为这应该更便宜，但是在jQuery中包装它确实会增加成本，否则您可以很容易地匹配e.target.className.indexOf'nav'，这一点也不太昂贵。不过，在那一点上，我不明白如果你首先选择jQuery，为什么“计算昂贵”甚至是一个论据…@something这里是的，我的印象是mouseover和mouseout会比mousemove做更少的检查，直到@sudharsan-s向我指出了区别，但他的答案肯定会更便宜，因为它不会对每个小动作都进行e.target检查？但是你是对的，最终这将是一个非常小的差别。@SworrubWehttam e.target的“检查”将完成，而不管浏览器是否将其包含在已通过的事件中，因此无论如何都是如此。但是是的，

执行一次代码可能会为您节省一些周期-这是mouseleave和sort允许您做的。@Something这里e.target“检查”已经完成，不管这在计算上可能比我或@sudharsan-s的答案更昂贵，有人知道吗？@Swarubwehttam我认为这应该更便宜，但是在jQuery中包装它确实会增加成本，否则您可以很容易地匹配e.target.className.indexOf'nav'，这一点也不太昂贵。不过，在那一点上，我不明白如果你首先选择jQuery，为什么“计算昂贵”甚至是一个论据…@something这里是的，我的印象是mouseover和mouseout会比mousemove做更少的检查，直到@sudharsan-s向我指出了区别，但他的答案肯定会更便宜，因为它不会对每个小动作都进行e.target检查？但是你是对的，最终这将是一个非常小的差别。@SworrubWehttam e.target的“检查”将完成，而不管浏览器是否将其包含在已通过的事件中，因此无论如何都是如此。但是，是的，执行一次代码可能会为您节省一些周期-这就是mouseleave和sort允许您执行的操作。@e.target“check”在这里完成了一些事情