1

私は、CSS3 アニメーションとトランジションを含むツールチップの大きなパックを作成中です。それらはすべて、フォールバックのある IE でも機能するため、テキストの上に表示されます。

以下を使用して、実際のツールチップを表示しています。

.tooltip span {
width:200px;
height:auto;
padding: 5px;
left: 50%;
margin-left: -110px;
font-family:Verdana, Geneva, sans-serif;
font-size: 12px;
color: #000;
text-align: center;
border: 5px solid #57a0d8;
background:#FFF;
text-indent: 0px;
position: absolute;
pointer-events: none;
bottom: -120px;
opacity: 0;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
box-shadow: 0px 0px 8px rgba(0,0,0,0.4);

残りは単なるアニメーションです。IE で実際のツールチップの下 120 ピクセルにカーソルを合わせると、そのツールチップが表示されます。これは

bottom:-120px;

CSSで。

私はjQueryを使用して、次を使用してこの問題をオーバーライドしようとしています:

編集：

新しい JS:

  $(function() {
if ($.browser.msie && parseInt($.browser.version) < 9)
    {     
              $('.tooltip span').hide(); 
          $(".tooltip").hover(function() {
$(this).find('span').addClass(".bottomfix");
}, function() {
$(this).find('span').removeClass(".bottomfix");
});
    }
  });

新しい CSS の修正:

.bottomfix {
    bottom:0px;
}

うまくいけば、いくつかの有用な情報！CSSの変更を除いて、コードは機能します。私は何か間違ったことをしているに違いない。IE でこれを修正するために CSS で変更できる解決策、または jQuery を使用するための解決策はありますか?

編集2：

IE8 では問題なく動作しますが、IE9 で 120 ピクセルの下部境界内にカーソルを置くとツールチップが表示されます。混乱という言葉はありません！

助けていただければ幸いです。これで、私の言いたいことが理解できると思います。

4

3 に答える 3

0

変化する

$(this).addClass(".tooltip span");

に

$(this).find('span').addClass("newStyle");

と同じremoveClass

また、

CSSでスタイル名をから.tooltip spanに変更します。.newStyle

于 2012-06-20T18:50:18.223 に答える
0

display:noneの代わりに使うと良いですopacity:0;。次のように書きます。

.tooltip span{
 display:none;
}
于 2012-06-21T05:14:38.947 に答える
0

次の行を変更する必要があると思います。

jQuery(this).addClass(".tooltip span");

に

jQuery(this).addClass("tooltip span");

のようにドットを付けずに名前だけを使用.classNameしaddClassたり使用したりしないでください。removeClassclassName

于 2012-06-20T18:45:48.997 に答える