Question

我正在使用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

Answer 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都没有在编辑模式下显示工具提示，但是它们可以在实时预览模式下工作。

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

Answer 2

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

JSFIDDLE

Answer 3

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

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

[1]：JsFiddle演示

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

3 个答案: