jQuery单击悬停工具提示

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>