使用 jQuery 事件控制 HINT.css 库工具提示的显示答案

【问题标题】：Control display of HINT.css library tooltip with jQuery events使用 jQuery 事件控制 HINT.css 库工具提示的显示
【发布时间】：2013-04-10 19:40:48
【问题描述】：

我正在使用HINT.css，并希望在单击 div/class 时隐藏提示，并在使用鼠标移出 div/class 时打开提示。我认为我在这里所拥有的非常简单。我很惊讶它没有用，我错过了什么？

<div class="promo">
   <div class="offer hint--top hint--info hint--rounded hint--info" 
    data-hint="PUT SOME COOL COPY, TO GET PEOPLE TO CLICK!!!"></div>
</div>

$(document).ready(function() {
   $( '.promo' ).on('click','.offer', function(){
   $(this).hide();
});
   $( '.promo' ).on('mouseleave','.offer', function(){
   $(this).show();
});
}); //end of document ready

【问题讨论】：

哪个部分不工作？它会给你任何 javascript 错误吗？检查您的控制台并发布结果。
你包含 jquery 了吗？

标签： jquery css show-hide mouseleave

【解决方案1】：

您遇到的问题是由HINT.css 库的工作方式造成的。工具提示是伪元素，所以虽然添加的 jQuery click 事件会隐藏元素，但由于 HINT.css 代码 :hover 类仍然适用于元素，它会立即再次出现。

但是我们可以解决这个问题，并通过将display:none 规则添加到伪元素作为由 jQuery 添加或删除的类来添加功能。

例如：

JavaScript

$(function() {
  $('.promo').on('click','.offer', function() {
    $(this).addClass('fakeHide');
  });

  $('.promo').on('mouseleave','.offer', function(){
    $(this).removeClass('fakeHide');
  });
});

CSS

.fakeHide[data-hint]:before, .fakeHide[data-hint]:after {
  display:none;
}

HTML

<div class="promo"><span class="offer hint--bottom hint--rounded hint--info" data-hint="PUT SOME COOL COPY!!">I am a promotion - hover over me</span></div>

这是一个很难演示的。出于某种原因，jsFiddle 和 jsBin 都不会在 edit 模式下显示工具提示，但它们确实可以在 实时预览 模式下工作。

See demo 或 edit demo - 请记住它只出现在实时预览模式中！

【讨论】：

非常感谢！我要读一些关于伪元素的书！
乐于助人。这是一个很好的问题 :-) 至于伪元素，我的建议是“不要在 DOM 中寻找它们” - 请参阅 stackoverflow.com/a/5041526/637889

【解决方案2】：

一旦您单击 div，它就会隐藏 div，但同时它会在您再次调用 show 的 div 上触发 mouseleave。这就是为什么它永远不会被隐藏。

JSFIDDLE

【讨论】：

+1 用于解释问题所在
谢谢！ JSFIDDLE 是空白的，不过我感谢您的帮助。
@antonio 抱歉，我更改了网址，请再次查看
太好了，谢谢！所以我注释掉了警报，并触发了一些额外的点击，工具提示继续触发。最终单击 div/class 将触发一个滑块，这就是我希望工具提示停止的原因。我认为工具提示已提醒用户，这就是我希望它停止的原因。

【解决方案3】：

您上面提到的代码完全符合您的要求..

[http://jsfiddle.net/MjFRe/][1]

[1]：JsFiddle 演示

【讨论】：

这个演示没有显示任何内容，应该是对问题的评论。