时间戳

首页 > 解决方案 > 如何在悬停时显示跨度，然后在未悬停时不隐藏？

html - 如何在悬停时显示跨度，然后在未悬停时不隐藏？

问题描述

这是一个示例 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>

标签： htmlcss

解决方案

您不能使用 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>

推荐阅读