Question

我正在研究一个基本的模态示例，只要用户将鼠标悬停在某个部分上，模态就会跟随鼠标光标。

我遇到的问题是，当从左到右时，模态显着滞后，如果用户将鼠标移出特定部分，则会触发fadeOut（）设置。

从右到左，无缝运作。

在小提琴中，当您从上到下将鼠标移到<nav>上时，您可以观察到松弛，并注意从下到上的稳固表现。

如果您有任何重复的问题或相关文章，请指出我正确的方向。到目前为止，我的搜索内容都是信息性的，但没有解决这个具体问题。

这是我的fiddle。

谢谢大家，我们热烈欢迎亲们的建议。

肯

Answer 1

问题是当你添加模式元素时，jquery会触发onmouseout事件，它会获得“焦点”，并且你的nav元素上不会触发悬停事件。我改变了你的例子，以便它现在好多了，请查看here

Answer 2

哦真棒，经典的例子！问题是，当你触摸section#coming-soon时jQuery认为你已经被淘汰了，所以它显然会运行fadeOut ......

解决此问题的一种方法是将section#coming-soon置于nav内，即使您将鼠标悬停在section#coming-soon上，脚本仍会认为您在<nav> <ul> <li><a>Home</a></li> <br /> <li><a>About</a></li> <br /> <li><a>My Work</a></li> <br /> <li><a>Blog</a></li> <br /> <li><a>Contact</a></li> </ul> <section id="coming-soon"> <h2>Coming Soon!</h2> </section> </nav>内。

{{1}}

此处示例：http://jsfiddle.net/gcJuz/1/

Answer 3

只有一些建议可以提供帮助。

// cache the jquery object
 var target =  $('section#coming-soon');
 target.hide();
 // select the specific nav, not all navs
 $('nav:first').mouseenter(function(){
    // only need to show it once on enter
    target.show();
 }).mousemove(function(e) {
    // can't really avoid this unless you want to keep moving it around all the time
    // but show it only once you mouse over
    target.css({
        'position' : 'absolute',
         'top' : e.pageY,
         'left' : e.pageX    
     });
 }).mouseleave(function() {
    target.fadeOut(1300);
  });

jQuery / hover（）/。mousemove（）优化问题

3 个答案: