7

次のスクリプトは、Chrome では正常に動作しますが、IE8 では動作しません。

jQuery:

$("<div class='divButtons'></div>").appendTo( $(".widget_header") );
$(".divButtons").text("321");

CSS:

.divButtons { background:orange; display:none; }
.widget:hover .divButtons { display:block; }

jsFiddle:

これは完全なものの jsFiddleです。

機能するもの:

にカーソルを.widget合わせると、css によって が.divButtons表示されます。これまでのところすべて順調です。.widgetaを別の場所に移動して離す.widgetと、.widgets の場所が変わり、.widgetホバリングしている にまだ が表示されます.divButtons。すべて問題ありません。Imouseoutが a.widgetとhoverover anotherの場合.widget、は I am ing over.divButtonsから消え、 .widgetI am ing over にhover表示されます。これまでのところすべて順調です。.widgethover

問題：

Chrome では起​​こらない IE8 の問題は、 I が の上にあるときでhover、.widgetこれによりI am ing overに.divButtonsが表示されます。次に、それを画面の一部に移動してから放すと、 はもう表示されませんが、放したばかりの にまだ表示されています。.widgethover.widgetwhitehover.widget.divButtons.widget

これは起こらないはずです。前に述べたように、これは Chrome で問題なく動作します。

質問：

現在Chromeで動作しているため、これをIE8で正しく動作させる方法はありますか?

4

4 に答える 4

1

hover疑似クラスを使用する代わりに、これを試すことができますか

CSS

.widget.hover  .divButtons { display:block; }​

JS

$('.widget').hover(function(e){
    $(e.currentTarget).addClass('hover');
},function(e){
    $(e.currentTarget).removeClass('hover');
});
于 2012-11-16T05:38:36.640 に答える
1

IE8 には、要素がマウス スコープの下から移動されたときに、要素に対してmouseoutまたはmouseleaveが決して発生しないというバグがあるようです。その結果:hover、決して削除されず、jquery のすべての mouseout、hoverleave などのイベント リスナーは呼び出されません。

私が思いついたのは.column、 a が解放されたときにホバリングされているかどうかを確認すること.widgetです。列がホバーされていない場合、ウィジェットからホバー状態を削除します。

jqueryを使用して削除できないため、これを維持するために.hoverクラスを使用しました。.widget:hover

jsフィドル

これは、作業修正のjsFiddleです。

CSS 

.widget.hover .divButtons { display:block; }​

jQuery

// We use this rather than :hover as :hover didn't always work in ie
$('.column').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

// This is our base widget hover code
$('.widget').hover(function() {
    $('.widget.hover').removeClass('hover');
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

jQuery ソート可能な呼び出し

$( ".column" ).sortable({
    connectWith: ".column",
    tolerance: 'pointer',
    // We use stop to call this when the widget has been dropped
    stop: function(event, ui) {
        // We wait 1 millisecond until after the widget is dropped
        setTimeout(function() {
            // Check if any widget is hovered. Good browsers will have 0 here and skip the following. IE8 will have 1 here
            if ($('.widget.hover').size() > 0) {
                // We check if the widgets parent column does not has hover
                if (!$('.widget.hover').first().parent().is('.hover')) {
                    // If no column hover. We remove this hover class
                    $('.widget.hover').removeClass('hover');
                }
            }
        }, 1);
    }
});

これがうまくいくことを願っています。

IE のバージョンにはこのようなバグがあるため、2012 年になってもまだこのような困難な回避策を講じなければならないのは非常に面倒です。

于 2012-11-16T03:45:58.787 に答える
0

IE9でもほぼ同じ問題が発生しました。ジャックの権利、マウスアウトが発生する前にDOM要素が変更された場合、ホバー状態でスタックすることがよくあります。

この種の動作に対する確実な修正が見つからなかったため、次のように、疑似クラスでは.hover()なくjQueryに切り替えました。:hover

$(elt).hover(function () {
    $(this).addClass("jHover");
}, function () {
    $(this).removeClass("jHover");
});

それほどクールではありませんが、はるかに信頼性があります。

于 2012-11-12T16:25:18.963 に答える
0

Internet Explorerは、アンカー以外にホバースタイルを適用することに関しては本当に信頼できません。

どうやら、DOMを横切って移動したときにアイテムを再描画したり、マウスがその領域に再び入らない限りホバー状態をリセットしたりすることはありません。これを修正するには、アイテムを直接使用する代わりに、ドラッグされたアイテムのクローンを作成できます。

このsortable()方法には、そのための簡単なオプションがあります。

$( ".column" ).sortable({
    connectWith: ".column",
    tolerance: 'pointer',
    helper: 'clone' // added
});
于 2012-11-12T10:12:40.433 に答える