Question

我在页面上的某些行上有不同的吉他课。在桌面上，用户将鼠标悬停在课程名称上，工具提示会提供课程详细信息。如果有兴趣，请单击链接。我希望在触摸屏上具有类似的功能：第一次触摸应显示工具提示；第二次触摸（在同一行上）应触发链接。有没有办法做到这一点？或者，可能是双击以触发链接？这是样品上的一支笔： https://codepen.io/Daverino/pen/NJBYwx

<html>
<style>
.tooltipWrapper {
  position: relative;
  display: block;
  padding: 0px 10px;
}

.toolTipDiv {
  float: none;
  width: 275px;
  margin-left: 20px;
}

.toolTipLink a {
  display: block;
  color: #202020;
  background-color: transparent;
  width: auto;
  /* Moved to tooltipWrapper */
/*   padding: 0px 10px; */
  text-decoration: none;
  font-size: 16px;
  margin-left: 0px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #878787;
  line-height: 17px;
}

.toolTipLink a:hover {
  background-color: #ddd;
  color: #9b0e11;
  /* Would cause the text to move after having
   * moved the padding to tooltipWrapper
  */
/*   padding-left: 10px; */
}

.tooltipWrapper > span {
  z-index: 10;
  display: none;
  padding: 7px 10px;
  bottom: 100%;
  /* adjust as needed 100% is the right edge */
  left: 90%;
  width: 140px;
  line-height: 16px;
  opacity: 0.85;
}

.tooltipWrapper:hover > span {
  display: inline;
  position: absolute;
  color: #eee;
  background: #000;
}
</style>
<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<div class="toolTipDiv">

  <span class="toolTipLink">

<a href="https://stackoverflow.com" target="_blank" class="tooltip">
<div class="tooltipWrapper">Medium amount of text in this line.
  <span>tootip text tootip text tootip text tootip text tootip text tootip text</span>  
</div>
</a>

<a href="https://stackoverflow.com" target="_blank" class="tooltip">
  <div class="tooltipWrapper">This is the text that will be hovered over. Sometimes it may be this long
      <span>Blah blah blah blah blah</span>
  </div>
</a>

<a href="https://stackoverflow.com" target="_blank" class="tooltip">
  <div class="tooltipWrapper">Here is a shorter line of text.
      <span>Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah</span>
  </div>
</a>

<a href="https://stackoverflow.com" target="_blank" class="tooltip">
  <div class="tooltipWrapper">Medium amount of text in this line.
      <span>I want this to also work on touchscreens</span>
  </div>
</a>

</span>
</div>

</body>

</html>

第一次点击打开工具提示；第二次点击跟随链接

0 个答案: