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 クリック イベントを追加すると要素が非表示になりますが、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 に答える
0

上記のコードは、まさにあなたが望むことを行います..

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

[1]: JsFiddle デモ

于 2013-04-10T19:45:48.537 に答える