3

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

3 回答 3

2

您遇到的问题是由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 都不会在编辑模式下显示工具提示，但是它们确实可以在实时预览模式下工作。

查看演示或编辑演示- 请记住它仅在实时预览模式下出现！

于 2013-04-10T20:49:57.413 回答
1

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

JSFIDDLE

于 2013-04-10T19:51:32.967 回答
0

您上面提到的代码正是您想要的..

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

[1]: JsFiddle 演示

于 2013-04-10T19:45:48.537 回答