代码之家 › 专栏 › 技术社区 › Aakash Thakur

鼠标悬停在div面板上时按住它

css html jquery javascript

Aakash Thakur · 技术社区 · 10 年前

我一直在开发一个div,它可以在mousemove上显示,并在延迟一段时间后隐藏。我已经实现了上述目标。

我已附上以下代码-

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

var $doc = $(document);


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

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

.nav {
  background: #111;
  text-align: center;
  color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  position: fixed;
  right: 0px;
  bottom: -100px;
  left: 0px;
  transition: .4s ease-in-out;
}
.nav.show {
  bottom: 0px;
  transition: .2s ease-in-out;
}

<div class="nav">This is a funny nav</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.unevent.js"></script>

http://jsfiddle.net/wVVbT/129/

根据这段代码,div在一定时间后消失。
现在,我的问题是,当我将鼠标悬停在div上时,如何保持div。非常感谢您的帮助。

6 回复 | 直到 10 年前

Sudharsan S 10 年前

你只要用 .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);
    })

Fiddle Link

Damian Bartosik 10 年前

只需检查目标元素(在e.target下)是否有类导航

看看这个提琴:

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

var $doc = $(document);


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

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

body {
  font-family: helvetica neue, helvetica, arial, sans-serif;
  height: 8000px;
}


.nav {
  background: #111;
  text-align: center;
  color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  position: fixed;
  right: 0px;
  bottom: -100px;
  left: 0px; 
  transition:.4s ease-in-out;
}

.nav.show{
  bottom:0px;
  transition:.2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">This is a funny nav</div>     
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.unevent.js"></script>

真的 if元素提供了类。所以只需插入check-is元素具有的if语句班导航并执行计时器。

Sworrub Wehttam 10 年前

这就是你想要的吗?我刚刚用 mouseover 和 mouseout 分别,而不是 mousemove . 更新的提琴: http://jsfiddle.net/wVVbT/130/

Anand Deep Singh 10 年前

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

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

到

var nav = $('.nav'),
    movementTimer = null,
    $doc = $(document);

$doc.hover(function(){
   nav.addClass('show');

}, function(){
   nav.removeClass("show");
})

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

z0mBi3 10 年前

您需要监听导航栏的mouseover和mouseout事件。检查工作代码

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

var $doc = $(document);

function showNav(){
	$doc.off('mousemove', showNav);
	nav.addClass("show");
  movementTimer = setTimeout(autoHide, 500);
}

function autoHide(){
	nav.removeClass("show");
  $doc.on('mousemove', showNav);
}

$doc.on('mousemove', showNav);

$('.nav').on('mouseover', function(e){
	clearTimeout(movementTimer);
  e.stopPropagation();
})
$('.nav').on('mouseout', function(e)
{
	$doc.on('mousemove', showNav);
})

body {
  font-family: helvetica neue, helvetica, arial, sans-serif;
  height: 8000px;
}


.nav {
  background: #111;
  text-align: center;
  color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  position: fixed;
  right: 0px;
  bottom: -100px;
  left: 0px; 
  transition:.4s ease-in-out;
}

.nav.show{
  bottom:0px;
  transition:.2s ease-in-out;
}

<div class="nav">This is a funny nav</div>     
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.unevent.js"></script>

Prifulnath 10 年前

在这里,我简单地补充了一下 mouseenter 和 mouseleave 在内部 mousemove 作用 .show 如果 .nav

var nav = $('.nav');
var movementTimer = null;
var $doc = $(document);
$doc.on('mousemove', function(e) {
nav.addClass('show');   
  $(".nav").on({
      mouseenter: function () {
          nav.addClass('show');
      },
      mouseleave: function () {
          clearTimeout(movementTimer);
          movementTimer = setTimeout(function()
          {
              nav.removeClass("show");
          }, 500);
          nav.removeClass("show");
      }
  });
});
$doc.on('mousemove', function(e)
    {
        clearTimeout(movementTimer);
        if(!$(e.target).hasClass("nav")) {
            movementTimer = setTimeout(function()
            {
                nav.removeClass("show");
            }, 500);
        }
    })

body {
  font-family: helvetica neue, helvetica, arial, sans-serif;
  height: 8000px;
}


.nav {
  background: #111;
  text-align: center;
  color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  position: fixed;
  right: 0px;
  bottom: -100px;
  left: 0px; 
  transition:.4s ease-in-out;
}
.nav.show{
  bottom:0px;
  transition:.2s ease-in-out;
}

<div class="nav">This is a funny nav</div>     
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.unevent.js"></script>