Question

Ok, lt me explain to you this very strange problem on which I am working the second week right now without any solution.

Imagine I have an image 100x100px.
Around the whole image I have an image area 100×100 (let us call the image area ALPHA).
I have also second Image Area on the image, but this time not around the whole image, but just inside of it (10×10) in the middle of the image (let’s call the second Image area BETA).

That Means that image area BETA is inside of the image area ALPHA.

Now, I want to add a border to the image when I am with the mouse over my image area ALPHA and to remove the border when I am mouse out of the image area ALPHA with following code (via jQuery) :

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

This code is working very well.

But I want also that when I am hovering over my second image area BETA that the code above will be executed. But it is not working.

I know why it is not working, because when I am with the mouse over my image area BETA, I am also with the mouse out of the image area ALPHA.

I was trying to solve this freakin problem, but unfortunately I realised I am not able to solve this problem on my own, so please help me. Is there any possibility to do something like this for example ?:

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

My first thought was event.stopPropagation(), but it is not working. Maybe I’ve just used it the wrong way….

PS: I know I could do this same just with CSS or without the image area. But I have to do it this way…

If you dont understand my explanation, I am ready to explain it one more time more exactly.

Answer 1

This is my interpretation of your requirements example

    $(document).ready(function(){

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