javascript - 当鼠标悬停在下一个或上一个 div 上时隐藏活动 div

Question

我有动态工具提示。在每次 div 点击时，它应该显示不同的工具提示。当我将鼠标悬停在下一个 div 上时，我想隐藏工具提示。我想在工具提示中有一个滚动条，所以当向右移动到 div 时，工具提示不应该被隐藏，因为需要向下滚动工具提示的数据。

$(".tooltipsShow").click(function() {
  $(".tooltips").show();
});


$(".tooltipsShow").hover(function() {
 $(".tooltipsText").parent(".tooltips").hide();
});

.tooltips {
  display: none;
  padding: 10px;
  position:absolute; 
  top: 10%;
  left: 13%;
  background: green;
  color:#fff;
  height: 130px;
  overflow:scroll;
}

.tooltipsShow {
  padding:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tooltipsShow">
  <p>Some text 1</p>
</div>
<div class="tooltipsShow">
  <p>Some text 2</p>
</div>
<div class="tooltipsShow">
  <p>Some text 3</p>
</div>
<div class="tooltipsShow">
  <p>Some text 4</p>
</div>

<div class="tooltips"><p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
</div>

标签： javascriptjquery

Answer 1

在我看来，最简单的解决方案是确保当 div 悬停在上面时工具提示仍然可见。这可以通过添加以下代码行来完成：

    $(".tooltips").hover(function() {
     $(".tooltips").show();
    });

编码：

$(".tooltipsShow").click(function() {
  $(".tooltips").show();
});


$(".tooltipsShow").hover(function() {
 $(".tooltipsText").parent(".tooltips").hide();
});

$(".tooltips").hover(function() {
 $(".tooltips").show();
});

.tooltips {
  display: none;
  padding: 10px;
  position:absolute; 
  top: 10%;
  left: 13%;
  background: green;
  color:#fff;
  height: 130px;
  overflow:scroll;
}

.tooltipsShow {
  padding:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tooltipsShow">
  <p>Some text 1</p>
</div>
<div class="tooltipsShow">
  <p>Some text 2</p>
</div>
<div class="tooltipsShow">
  <p>Some text 3</p>
</div>
<div class="tooltipsShow">
  <p>Some text 4</p>
</div>

<div class="tooltips"><p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
  <p class="tooltipsText">I am tooltips</p>
</div>