Question

当用户点击（选择）一个框时，我试图让工具提示停留，当点击另一个框时它应该隐藏。

为了更好地理解，这应该像具有工具提示的可选选项一样工作，当用户点击（选择一个选项）时，工具提示应该保留，当点击另一个框时另一个框工具提示应该留下来。

我制作tootip的方式是宣布

  $(this).mouseleave(function(){
    $(this).mouseover();
  })

但听起来，一旦我宣布它就无法从元素中删除它，所以工具提示永远不会隐藏。

请参阅下面的完整代码段：

jQuery(".box").tooltip();

jQuery(".box").click(function(){
  $(this).mouseleave(function(){
    $(this).mouseover();
  })
});

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: lightblue;
  margin: 5px;
  transition: 0.5s ease-in-out;
}
.box:hover {
  background-color: lightpink;
 }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<div class="box" title="box 1"></div>
<div class="box" title="box 2"></div>
<div class="box" title="box 3"></div>
<div class="box" title="box 4"></div>
<div class="box" title="box 5"></div>
<div class="box" title="box 6"></div>

jQuery模仿悬停会影响点击并在单击另一个元素时删除悬停效果

0 个答案: