13

私が使用しているライブラリでは、要素にカーソルを合わせたときに、要素をdomの前面に移動するタスクがあります。（私はそれを大きくするので、それを見る必要があり、マウスを外したときに縮小します）。

appendChildren私が使用しているライブラリには、アクティブな要素を使用してその親の最後に移動し、さらにdomの最後に向かって、次に上に移動する、きちんとしたソリューションがあります。

問題は、あなたが動かしている要素があなたがmouseoutイベントの上にホバリングしている要素であるために失われると私は信じていることです。マウスはまだノード上にありますが、mouseoutイベントは発生していません。

問題を確認するために機能を削除しました。Firefoxでは正常に動作しますが、IEのどのバージョンでも動作しません。ここでは速度を上げるためにjQueryを使用しています。ソリューションは単純な古いJavascriptにすることができます。これは、アップストリームに戻る必要がある場合があるため、優先されます。

要素がvmlであり、ライブラリがRaphaelであり、toFront呼び出しを使用しているため、ここではz-indexを使用できません。簡単な例で問題を示すためにul/liを使用したサンプル

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style>
    li
    {
        border:1px solid black;
    }
</style>
</head>
<body>
<ul><li>Test 1</li></ul>
<ul><li>Test 2</li></ul>
<ul><li>Test 3</li></ul>
<ul><li>Test 4</li></ul>
<script>
$(function(){
    $("li").mouseover(function(){
        $(this).css("border-color","red");
        this.parentNode.appendChild(this);
    });

    $("li").mouseout(function(){
        $(this).css("border-color","black");
    });
});
</script>
</body>
</html>

編集：これは、実際の動作を確認するためのjsペーストビンへのリンクです。http://jsbin.com/obesa4

**編集2：**投稿する前に、すべての回答に対するすべてのコメントを参照してください。

4

4 に答える 4

15

問題は、 IEが要素のように動作し、要素上で結合されるため、IEの処理がmouseover異なることです。他のブラウザでは、それはただです。mouseentermousemovemouseenter

したがって、マウスがターゲット要素に入って外観を変更し、その親mouseoverに再追加した後でも、マウスが移動するたびに要素が再追加され、他のイベントハンドラーが呼び出されなくなります。

解決策は、のアクションが1回だけ実行されるように、正しいmouseover動作をエミュレートすることです。onmouseover

$("li").mouseover( function() {
    // make sure these actions are executed only once
    if ( this.style.borderColor != "red" ) {
        this.style.borderColor = "red";
        this.parentNode.appendChild(this);
    }
});

例

  1. あなたの拡張デモ
  2. mouseoverブラウザ間の違いを示す 例（ボーナス：ネイティブJavaScript）
于 2010-10-23T22:14:44.520 に答える
1

ネストされたdivと親のmouseenterイベントで動作させることができました：

<div id="frame">
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>
...
$('#frame').mouseenter(function() {
     $(".box").css("border-color", "black");
});

Raphaelを使用した作業バージョンは次のとおりです。

http://jsfiddle.net/xDREx/

于 2010-10-20T19:06:12.737 に答える
1

@galambalazsの回答を変更したのは、一部の要素がまだmouseover効果を保持しているため、li要素にすばやくカーソルを合わせると失敗することがわかったためです。

偶数がトリガーさmouseoverれるたびにこれらの要素をスタックにプッシュすることで、イベントのトリガーに失敗した要素のホバー状態を削除するソリューションを思いつきました。orイベントが呼び出されるmouseoverたびに、この配列から要素をポップして、そこに配置されているスタイルを削除します。mouseovermouseout

$(function(){

    // Track any hovered elements
    window.hovered = [];

    $("li").mouseover(function() {
        // make sure that these actions happen only once
        if ( $(this).css("border-color") != "red" ) {
            resetHovered ();  // Reset any previous hovered elements
            $(this).css("border-color","red");
            this.parentNode.appendChild(this);
            hovered.push(this);
        }
    });

    $("li").mouseout(function(){
        resetHovered();  // Reset any previous hovered elements
    });

    // Reset any elements on the stack
    function resetHovered () {
        while ( hovered.length > 0 ) {
            var elem = hovered.pop();
            $(elem).css("border-color","black");
        }
    }
});

このソリューションをIE11でテストしました。機能の例はここにあります。

于 2014-05-23T21:28:22.540 に答える
0

これは不安定で、IEのみのようです（VMLもそうです）。親要素に高さが指定されている場合は、mouseoutハンドラーを親にアタッチできます...しかし、それはあなたの状況では機能しないようです。最善の代替策は、隣接する要素にマウスオーバーを使用して非表示にすることです。

$(function()
{
    $("li").mouseover(function()
    {
        $("li").css("border-color", "black");
        $(this).css("border-color", "red");
        this.parentNode.appendChild(this);
    });
});

またはSVG。SVGでz-indexを使用できます。

于 2010-09-11T00:53:14.203 に答える