4

他に投稿されていない興味深い問題に遭遇しました。

この JSFiddleを見てください。カーソルを合わせると 2 つのことが発生する div があります: (1) :hover 疑似クラスを介して CSS フォーマットを取得し、(2) 画像に関する情報を含むオーバーレイが画像の下部にポップアップします。 （jQuery経由）。

これは、最新のすべてのブラウザーで問題なく動作しますが、IE 7 または 8 で開きます。フレームにマウスを合わせます。フレームの上部にマウス アウトした場合、問題はありません。オーバーレイが消え、CSS フォーマットが削除されます。ただし、マウスアウト中にマウスがオーバーレイの上を直接通過すると、:hover の書式設定が維持されます。オーバーレイが削除されるため、jQuery はマウスアウトしたことを認識しますが、IE は CSS の :hover フォーマットが残るため認識しません。何かご意見は？

4

3 に答える 3

5

リンク:hoverを除くすべての要素のCSSサポートは不完全であり、IE 8 未満ではサポートされていません。<a>..</a>

http://www.quirksmode.org/css/contents.html#t16

IE 5/6 はリンク上でのみ両方をサポートします。IE 7 は、すべての要素で :hover をサポートしていますが、:active はサポートしていません。

IE 8-10 (およびおそらく古いものも) には、わずかなバグがあります。ネストされた要素の上でマウスをクリックしても、:active がトリガーされません。コード例の 1 つでマウス ボタンを押して、テスト ページで試してみてください。:active スタイルは機能しません。

于 2012-09-27T14:35:50.273 に答える
2

これは jQuery で広く知られている現象で、Internet Explorer のマウス リーブ機能が独自のものであるためです。jquery の mouseleave/mouseenter メソッドを使用する必要があります。

メソッドとメソッドを使用した更新されたフィドル フィドルを次に示します。動作し、IE7-9 でテストされています。mouseenter()mouseleave()

簡単にするために、ここにもコードを含めます。


JS:

$(document).ready(function() {
    $('#frame').mouseenter(function() {
        var $this = $(this);
        $this.append('<div id="overlay">blah blah</div>');
        $this.addClass("hover");
    }).mouseleave(function() {
        $('#overlay').remove();
        $(this).removeClass("hover");
    });
    $('#overlay').mouseleave(function() {
        $(this).remove();
    });
});

CSS:

#frame {
    padding:5px;
    border:1px solid black;
    width:150px;
    text-align:center;
    position:relative;
}
#frame.hover {
    border:1px solid red;
}
#frame img {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
    filter: alpha(opacity=25);
    -moz-opacity: 0.25;
    opacity: 0.25;
}
#frame.hover img {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}
#overlay {
    background-color:black;
    color:white;
    height:25px;
    width:100%;
    font-size:10px;
    position:absolute;
    bottom:0;
    left:0;
}


編集:コメントで説明した結果に基づいて、フィドルと上記のコードを更新しました。完全に動作するはずです。動作しない場合はお知らせください。


もう少し詳しく：

このソリューションでは、IE のメソッドに多数の問題があるため、jQuery のメソッドmouseenterとメソッドを使用します。ご存じかもしれませんが、は/の簡略版ですが、IE6-9 (およびおそらく IE 10 ですが、私はこれをテストしていません) に起因する多数の問題があります。特定の問題については、Stack Overflow または Google で「jQuery hover IE issues」を検索し、表示される結果の一部を参照してください。このため、特に IE のコードで既に問題が発生している場合は、 を使用するのではなく/を入力するのに常に 10 秒余分に時間がかかります。mouseleavehoverhovermouseentermouseleavehovermouseentermouseleavehover


ご質問やご不明な点がございましたら、お知らせください。幸運を！:)

于 2012-09-27T14:49:34.963 に答える
2

すでにホバーに jQuery を使用しているため、スクリプトを次のように変更することをお勧めします。

$(document).ready(function() {
    $('#frame').hover(
        function() {
            $('#frame').addClass('hover').append('<div id="overlay">blah blah</div>');
        }, 
        function() {
             $('#frame').removeClass('hover')
            $('#overlay').remove();
        }
    );
});

次に、関連するすべての要素でCSS を から:hoverに変更します。.hoverこのフィドルに従って：

http://jsfiddle.net/BZj2v/

于 2012-09-27T14:39:58.537 に答える