0

好的，让我向您解释这个非常奇怪的问题，我现在正在第二周工作，但没有任何解决方案。

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

这意味着图像区域 BETA 在图像区域 ALPHA 内。

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

$("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 或不使用图像区域来做同样的事情。但我必须这样做......

如果你不明白我的解释，我准备再更准确地解释一遍。

4

4 回答 4

0

您可能会更好地使用 CSS：

area#ALPHA {
    border:none;
}

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

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

于 2012-04-26T13:43:28.753 回答
0

您需要将图像修改代码放在事件之外，即。另一个功能。绑定hover handler，调用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 回答
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();
   })​

诀窍是在您离开孩子（测试版）时手动触发父级（alpha）的 mouseenter 事件。

于 2012-04-26T14:04:25.417 回答