Question

I have an image that is sliced into 9 images into multiple div.

I want to implement fading focus on 3 group of sliced images. Once I mouseenter to a group of images, the other group of images will fadeout.

The problem arises when I hover across the images within the same group, the other images will flicker. Anyone can help me on how to detect whether I am still within the same group of images.

$(".group1").mouseenter(function (){
  $(".group2, .group3").fadeTo("slow",.5);
}).mouseout(function (){
  $(".group1, .group2, .group3").fadeTo("slow",1);
});

Answer 1

As group1 is a class I assume you’ve given it to three of your divisions. The mouse out event will occur each time the mouse leaves any of those divisions even if it goes straight into another group1 div (as you’d hope).

I think the simplest solution would be to wrap each group in an outer div and bind to those:

$("#group1Wrapper").mouseenter(function (){
  $(".group2, .group3").fadeTo("slow",.5);
}).mouseout(function (){
  $(".group1, .group2, .group3").fadeTo("slow",1);
});