Jquery mouseleave & mouseenter issue

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放在.hint内即可。

小提琴

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

<div title="This is my tooltip">

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

Answer 2

用另一个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 3

让.descdiv成为你.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 4

更新了小提琴。

如果您无法更改HTML代码的结构，请尝试稍等片刻，然后再使用setTimeout()隐藏descdiv，因此，如果用户在此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();
 })
});