如何在悬停时显示跨度，然后在未悬停时不隐藏？ [复制]

Question

这是一个示例 jsfiddle，它在将鼠标悬停在其上时显示跨度内容。 我希望它在不悬停时不要隐藏。 当点击外面的某个地方时它应该隐藏起来。

http://jsfiddle.net/jn6re3aq/1/

#myChart {
  background-color: black;
}

#tooltip {
  display: none;
  position: relative;
  top: 8px;
  left: 10px;
  padding: 5px;
  margin: 10px;
  z-index: 100;
  background: #333;
  border: 1px solid #c0c0c0;
  opacity: 0.8;
  width: 300px;
  color: black;
  text-align: left;
}

#graphs:hover #tooltip {
  display: block;
}

#graphs {
  background-color: red;
}

<section id="graphs">
  <span id="tooltip">thisistest</span>
  <canvas id="myChart" width="550" height="350"></canvas>
</section>

Answer 1

你不能用 css 做到这一点，你必须使用 javascript 或 jquery，只需在悬停时将显示更改为阻止。

这是一个使用 jquery 的示例：

$("#graphs").hover(function(){
  $("#tooltip").css("display","block");
});

#myChart{
    background-color: black;
}
#tooltip {
    display: none;
    position: relative;
    padding: 5px; 
    margin: 10px;
    z-index: 100;
    background: #333;
    border: 1px solid #c0c0c0;
    opacity: 0.8; 
    width: 300px;
    color: black;
    text-align: left;
}

#graphs{
 background-color: red;   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="graphs">
    <span id="tooltip">thisistest</span>    
    <canvas id="myChart" width="550" height="350"></canvas>
</section>