Question

我正在制作一个WordPress网站，其中使用工具提示来显示用户将鼠标悬停在图标上的时间。现在在移动设备上，我希望将悬停功能通过单击功能完成，因此我创建了一个jQuery来处理它。我是jQuery的新手，所以这可能是问题所在，或者我做错了，我可以用另一种方式来做。现在的问题是，所有工具提示文本都不会被激活，没有人单击一个工具提示图标吗？

它可以与CSS一起使用，仅使用display: block/none，但我也希望click函数也可以工作。然后使用opacity和transition

设置样式

$(function() {
  $('.tooltip').clicked(function() {
    $('.tooltiptext').addClass("tooltip-clicked");
  })
})

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip:hover .tooltiptext {
  display: block;
  visibility: visible;
  opacity: 1;
}

.tooltip-text {
  display: none;
  visibility: hidden;
}

.tooltip-clicked {
  display: block;
  visibility: visible;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<i class="tooltip">
  <p class="tooltip-text">lorem ipsum...</p>
</i>

Answer 1

我已经修改了您的CSS内容，使其可单击且足够简单，以区别并修改您的jQuery代码：

$(document).ready(function(){
 $('.tooltip').click(function (){
  $('.tooltip').addClass("tooltip-clicked");
 })
})

摘要：

$(document).ready(function(){
 $('.tooltip').click(function (){
  $('.tooltip').addClass("tooltip-clicked");
 })
})

.tooltip {
 position: relative;
 display: inline-block;
 cursor: pointer;
}

.tooltip:hover {
 color:green;
}

.tooltip.tooltip-clicked:hover {
 color:blue;
}

.tooltip-clicked {
 color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<i class="tooltip">
 <p class="tooltip-text">lorem ipsum...</p>
</i>

Answer 2

问题在这里：

 jQuery('.tooltip').clicked(function (){

将clicked更改为click，将tooltiptext更改为tooltip-text，例如：

$(function(){
  $('.tooltip').click(function (){
    $('.tooltip-text').addClass("tooltip-clicked");
    // put your tooltip logic here
  });
});

.tooltip-clicked {
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<i class="tooltip">
 <p class="tooltip-text">lorem ipsum...</p>
</i>

jQuery单击悬停工具提示

2 个答案: