jQuery mouseleave和mouseenter问题

Question

我如何允许用户单击另一个按钮的鼠标上显示“单击我”的按钮。

这是代码-

<div class="hint"> ?</div>

<div class="desc">
    This is supposed to appear on hover
    This is supposed to appear on hover
    This is supposed to appear on hover
    This is supposed to appear on hover
    <button type="button">
        Click me
    </button>
</div>

$(document).ready(function() {

  var hint = $('.hint');
  var desc = $('.desc');

  hint.mouseenter(function() {
    desc.show();
  });

   hint.mouseleave(function() {
    desc.hide();
  });
});

这是演示

Answer 1

将.desc div设为.desc的子.hint

 $(document).ready(function() { var hint = $('.hint'); var desc = $('.desc'); hint.mouseenter(function() { desc.show(); }); hint.mouseleave(function() { desc.hide(); }); }); 

 .hint { padding: 20px; background: white; width: 10px; height: 10px; border-radius: 50%; text-align: center; position: relative; } .desc { display: none; width: 200px; background: white; z-index: 3; border: 1px solid #CCC; border-radius: 3px; top: 20px; left: -5px; padding: 12px; color: #666; font-size: 12px; position: absolute; top: 50%; left: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="hint"> ?<div class="desc"> This is supposed to appear on hover This is supposed to appear on hover This is supposed to appear on hover This is supposed to appear on hover <button type="button"> Click me </button> </div></div> 

见小提琴

Answer 2

只需将.desc放在.desc内.hint 。

小提琴

对于基本工具提示，您需要：

<div title="This is my tooltip">

有关更高级的工具提示， 请参阅此

Answer 3

用另一个div包装您的html，然后向其中添加mouseenter和mouseleave事件。

 var con = $('.container'); var desc = $('.desc'); con.mouseenter(function() { desc.show(); }); con.mouseleave(function() { desc.hide(); }); 

 .hint { padding: 20px; background: white; width: 10px; height: 10px; border-radius: 50%; } .desc { display: none; width: 200px; background: white; z-index: 3; border: 1px solid #CCC; border-radius: 3px; top: 20px; left: -5px; padding: 12px; color: #666; font-size: 12px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="hint"> ?</div> <div class="desc"> This is supposed to appear on hover This is supposed to appear on hover This is supposed to appear on hover This is supposed to appear on hover <button type="button"> Click me </button> </div> </div> 

Answer 4

更新小提琴 。

如果您无法更改HTML代码的结构，请尝试稍等片刻，然后再使用setTimeout()隐藏desc div，因此，如果用户在此div中输入鼠标，则不会通过清除timeout隐藏它，请参见下面的示例：

$(document).ready(function() {
    var hide_timeout;
    var hide_after = 100; //100 ms

    var hint = $('.hint');
    var desc = $('.desc');

    hint.mouseenter(function() {
      desc.show();
    });

     hint.mouseleave(function() {
       hide_timeout = setTimeout(function(){
          desc.hide();
       },hide_after);

    });

     desc.mouseenter(function() {
      clearTimeout(hide_timeout);
    });

    desc.mouseleave(function() {
      desc.hide();      
    });
});

希望这可以帮助。

---

  $(document).ready(function() { var hide_timeout; var hide_after = 100; //100 ms var hint = $('.hint'); var desc = $('.desc'); hint.mouseenter(function() { desc.show(); }); hint.mouseleave(function() { hide_timeout = setTimeout(function(){ desc.hide(); },hide_after); }); desc.mouseenter(function() { clearTimeout(hide_timeout); }); desc.mouseleave(function() { desc.hide(); }); }); 

 .hint { padding: 20px; background: white; width: 10px; height: 10px; border-radius: 50%; } .desc { display: none; width: 200px; background: white; z-index: 3; border: 1px solid #CCC; border-radius: 3px; top: 20px; left: -5px; padding: 12px; color: #666; font-size: 12px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hint"> ?</div> <div class="desc"> This is supposed to appear on hover This is supposed to appear on hover This is supposed to appear on hover This is supposed to appear on hover <button type="button"> Click me </button> </div> 

Answer 5

您有2个选择

1-当工具提示悬停时，您可以添加show()和hide() ： 小提琴

2-您只能使用CSS来显示或隐藏它。 不确定是否需要JS来完成类似这样的简单操作。

Answer 6

这个演示展示了我想实现的目标。 诀窍还在于，当鼠标输入另一个元素时，也可以捕获触发的事件。

$('*').not('.hint').not('.desc').not('.desc>button').mouseenter(function() {
   desc.hide();
});

Answer 7

$(function(){
 $('.desc').hide();

 $(document).on('mouseenter','.hint',function(){
  $('.desc').show();
 })

});