Question

好的，我告诉你这个非常奇怪的问题，我现在正在第二周工作而没有任何解决方案。

想象一下，我的图像是100x100px。在整个图像周围，我有一个图像区域100x100（我们称之为图像区域ALPHA）。我在图像上还有第二个图像区域，但这次不是在整个图像周围，而是在图像中间的内部（10x10）（让我们调用第二个图像区域BETA）。

这意味着图像区域BETA位于图像区域ALPHA的内部。

现在，我想在鼠标悬停在图像区域ALPHA上时为图像添加边框，并在鼠标移出图像区域ALPHA时使用以下代码（通过jQuery）删除边框：

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

此代码运行良好。

但是我还希望当我在我的第二个图像区域BETA上方悬停时，将执行上面的代码。但它没有用。

我知道它为什么不起作用，因为当我将鼠标放在我的图像区域BETA上时，我也将鼠标移出图像区域ALPHA。

我试图解决这个奇怪的问题，但不幸的是我意识到我无法自己解决这个问题，所以请帮助我。例如，有没有可能做这样的事情？：

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

我的第一个想法是event.stopPropagation（），但它不起作用。也许我只是以错误的方式使用它......

PS：我知道我可以用CSS或没有图像区域来做同样的事情。但我必须这样做......

如果你不理解我的解释，我准备再一次解释它了。

Answer 1

这是我对您的要求的解释example

    $(document).ready(function(){

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

Answer 2

您可能会更好地使用CSS：

area#ALPHA {
    border:none;
}

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

当鼠标处于alpha状态时，这将添加边框，但是当它处于BETA状态时，它会将鼠标视为不在ALPHA中。

Answer 3

您需要将图像修改代码放在事件之外，即。另一个功能。绑定悬停处理程序，并调用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();
        }
     );
});

这是有效的fiddle：

Answer 4

这也有效，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();
   })

诀窍是当你离开孩子（beta）时触发手动触发父母（alpha）的mouseenter事件。

如何忽略触发器内部兄弟触发的鼠标事件（图像区域）

4 个答案: