0

さて、私が今2週目に解決策なしで取り組んでいるこの非常に奇妙な問題について説明しましょう。

100x100pxの画像があると想像してください。画像全体の周りに100x100の画像領域があります（画像領域をALPHAと呼びます）。また、画像上に2番目の画像領域がありますが、今回は画像全体ではなく、画像の真ん中（10x10）の画像の真ん中にあります（2番目の画像領域をベータ版と呼びます）。

これは、画像領域BETAが画像領域ALPHAの内側にあることを意味します。

ここで、画像領域ALPHAの上にマウスを置いたときに画像に境界線を追加し、次のコードを使用して画像領域ALPHAからマウスを離したときに境界線を削除します（jQueryを使用）。

$("area.ALPHA").hover(
  function () {
    $('img').css('border','1px solid #000');
  }, 
  function () {
    $('img').css('border','none');
  }
);

このコードは非常にうまく機能しています。

ただし、2番目の画像領域BETAにカーソルを合わせると、上記のコードが実行されることも必要です。しかし、それは機能していません。

なぜそれが機能しないのかはわかっています。なぜなら、画像領域BETAの上にマウスを置いているときは、画像領域ALPHAの外にもマウスを置いているからです。

私はこのフリーキンの問題を解決しようとしていましたが、残念ながら私はこの問題を自分で解決することはできないことに気づきました。助けてください。たとえば、このようなことをする可能性はありますか？：

if ($("area#ALPHA").mouseout === false && $("area#BETA").mouseenter === true) {
   // ignore the first event (or something like this)...
}

私の最初の考えはevent.stopPropagation（）でしたが、機能していません。たぶん私はそれを間違った方法で使用しただけです...

PS：CSSを使用する場合でも、画像領域を使用しない場合でも、これを同じように実行できることはわかっています。しかし、私はそれをこのようにしなければなりません...

私の説明がわからない場合は、もう一度正確に説明する準備ができています。

4

4 に答える 4

0

これは、要件の例に対する私の解釈です

    $(document).ready(function(){

      $("#ALPHA, #BETA").hover(
        function () {
          $(this).css('border','1px solid #000');
        }, 
        function () {
          $(this).css('border','none');
        }
     );
   });
于 2012-04-26T13:59:13.377 に答える
0

これも機能しますhttp://jsfiddle.net/uurBc/

   $(".hover").mouseenter(function(e){
       result = $(this).attr('id')
       $(".result").html(result)
       e.stopPropagation();
     })

   $(".hover").mouseleave(function(e){
       $(".result").html("")
       $(this).parents(".hover").trigger('mouseenter')
       e.stopPropagation();
   })​

トリックは、子 (ベータ) を離れるときに、親 (アルファ) の mouseenter イベントを手動でトリガーすることでした。

于 2012-04-26T14:04:25.417 に答える
0

代わりに CSS を使用することをお勧めします。

area#ALPHA {
    border:none;
}

area#ALPHA:hover {
    border: 1px solid #000;
}

これにより、マウスがアルファ版の場合に境界線が追加されますが、ベータ版のマウスはアルファ版ではないと見なされます。

于 2012-04-26T13:43:28.753 に答える
0

画像変更コードをイベントの外に置く必要があります。別の機能。ホバー ハンドラーをバインドし、alpha の外部イベント関数を呼び出します。その逆も同様です。

黙って、コードの話をしましょう。

function insideAlpha(){
    $('.result').text("inside alpha");
}

function outsideAlpha(){
    $('.result').text("outside alpha");
}


$(function(){
    $("div.alpha").hover(
      function () {
          insideAlpha();
      }, 
      function () {
          outsideAlpha();
      }
    );
    $("div.beta").hover(
        function(e){
            e.stopPropagation();
            outsideAlpha();
        },
        function(e){
            e.stopPropagation();
            insideAlpha();
        }
     );
});​

ここに作業フィドルがあります：

于 2012-04-26T13:45:04.193 に答える