2

私はカスタムツールチップ関数（jQuery内）を持っており、 IE7を除くすべての[主要な]ブラウザー（ IE8でも）でうまく機能します。

このサイトのDoctypeは、新しいhtml 5 doctype（<!DOCTYPE html>）です。

5つのリンク/画像があります。IE7は、最初のツールチップを正しく表示します（ただし、いくつかのマイナーなレイアウトの問題はありませんが、修正できます）が、他のリンク（画像）では、残りの部分は元のブラウザーのツールチップに戻ります。

$('#port-window a').hover(function() {
        var tip = $(this).attr('title');
        $(this).attr('title','');
        $(this).append("<div id='tooltip'>"+ tip +"</div>");
        $("#tooltip")
            .css("position","relative")
            .css("z-index","999")
            .fadeIn("slow");
    }, function() {
        $(this).attr('title',$('#tooltip').html());
        $(this).children('div#tooltip').remove();
    });

タイトルのHTMLは次のようになります。

<ul class="portfolio">
      <li>
        <div id="port-window">
            <a title="This is the title" href="[blogurl]/work/web-design-dev/website/">
                <span class="window"></span>
                <span class="gradient"></span>
                <img src="[blogurl]/portfolio-images/thumbs/image.jpg" alt="alt tag info" title="img title attr - not used" />
            </a>
        </div>
      </li>
</ul>

誰かがこの問題を解決する方法に光を当てることができますか？

4

3 に答える 3

2

IE7でこれを確認してくださいhttp://jsfiddle.net/Xg7ru/1/

あなたが犯した間違いを見つけるのは難しくありませんでした、あなたは通常CSSにとって問題ではないページでid＃port-windowを3回使用していました、しかしjQueryは与えられたIDでDOMから最初の要素を取り戻します最初の写真のために働いていました。他のブラウザでどのように機能したかはよくわかりません。

HTMLマークアップをid='port-window'からclass='port-window'に変更し、それに応じてJS、CSSのセレクターを変更しましたが、IE7では正常に機能しているようです。

編集：仕様に従って、特定のIDに対して1つのDOMノードのみが存在できます

于 2012-10-02T19:52:46.510 に答える
0

主な問題は、複数のid="port-window"オブジェクトがあることです。それはできません-IDごとに1つのオブジェクト。それらをクラスに変更します。IE7で動作するこのコードをお勧めします（そして、.port-window代わりに使用するようにCSSを変更します#port-window）：

<ul class="portfolio">
    <li>
        <div class="port-window">
            <a data-title="TITLE 1" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
    <li>
        <div class="port-window">
            <a data-title="TITLE 2" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
    <li>
        <div class="port-window">
            <a data-title="TITLE 3" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
</ul>​

ツールチップはデータ項目に保存され（したがって、クリアする必要はありません）、新しいdivを再度検索するのではなく、追跡するだけです。

$('.port-window a').hover(function() {
    $("<div id='tooltip' style='display: none; position: relative; z-index: 999;' >" +
            $(this).data('title') + "</div>")
        .insertAfter(this)
        .fadeIn("slow");
}, function() {
    $('#tooltip').remove();
});

HTMLを使用した作業デモ（および修正）：http：//jsfiddle.net/jfriend00/LsnnH/

于 2012-10-02T19:16:49.417 に答える
0

問題は方法にあるのではないかと思います.attr()。

.prop()代わりに、このメソッドを使用してみてください。

この2つは非常に似ていますが、違いがあり、実際、ほとんどの.prop()場合、使用するのに適しています。

.attr()さらに重要なことに、IEには古いバージョンのバグがあると思います。そのため、.prop()では機能しないものもあり.attr()ます。これは、それらのシナリオの1つである可能性があります。

私はあなたのコードでそれを試すために手渡すIE7を持っていないので、あなたはそれを試して、それがうまくいくかどうか私に知らせなければならないでしょう。

参照：

お役に立てば幸いです。

于 2012-10-02T19:37:06.427 に答える