Question

我一直在研究一个显示鼠标移动并在一定延迟后隐藏的div。我已经实现了上述的目标。

我已附上以下代码 -

＆＃13;

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);
})

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

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

Answer 1

您只需使用.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

Answer 2

这是你想要的吗？我刚刚分别用mouseover和mouseout取代了方法，而不是mousemove。更新了小提琴：http://jsfiddle.net/wVVbT/130/

Answer 3

只需检查目标元素（在e.target下）是否具有类 nav

看看这个小提琴：

＆＃13;

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);
        }
    })

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

如果元素提供了类，则有一个函数.hasClass（class）返回 true 。因此，只需插入一个if语句，检查元素是否具有不类 nav 并执行计时器。

Answer 4

您可以从

更新JS代码

TextView textView = (TextView)view.findViewById(R.id.apName);
textView.setText(accessPoints.get(i);
textView.setPadding(60,0,0,0);
textView.setOnClickListener(
  new View.OnClickListener() {   
    @Override
    public void onClick(View view) {
        final Dialog dialog =new Dialog(getActivity());
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        Window window = dialog.getWindow();
        dialog.setContentView(R.layout.password_dialog);
        final Button connect = (Button)dialog.findViewById(R.id.connect);
        Button cancel = (Button)dialog.findViewById(R.id.cancel);
        connect.setOnClickListener(
          new View.OnClickListener() {
            @Override
            public void onClick(View view) {
               list<WifiConfiguration> list = wifiManager.getConfiguredNetworks();
               for( WifiConfiguration i : list ) {
               if(i.SSID != null && i.SSID.equals("\"" + networkSSID + "\"")) {
                wifiManager.disconnect();
                wifiManager.enableNetwork(i.networkId, true);
                wifiManager.reconnect();               

                 break;
             }
            }
           }

到

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

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

也不要一次又一次地使用var进行最佳练习。

Answer 5

您需要收听导航栏的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>

Answer 6

我只是在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>

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

6 个答案: