Question

如何让用户点击显示＆＃34;点击我＆＃34;出现在另一个按钮的鼠标中心。

这是代码 -

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

以下是Demo

Answer 1

让.desc div成为您.hint

的孩子

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

请参阅fiddle

Answer 2

只需将.desc放在.hint内。

Fiddle

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

<div title="This is my tooltip">

对于更高级的工具提示，See this

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

<强> Updated Fiddle

如果您无法更改HTML代码的结构，请尝试稍等一下，然后使用setTimeout()隐藏timeout div，这样如果用户在此div中输入鼠标，则不会隐藏它清除$(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>

dialog.mode = FBSDKShareDialogModeFeedWeb

Answer 5

您有2个选项

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

2 - 您只能使用css来显示或隐藏它。不确定你是否需要JS来处理这类简单的事情。

Answer 6

这Demo显示了我认为你想要实现的目标。诀窍是当鼠标进入另一个元素时也捕获触发的事件。

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

Answer 7

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

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

});

Jquery mouseleave＆amp; mouseenter问题

7 个答案: