jQuery Spotlight Issue

Question

Im trying to insert a jquery Spotlight snippet ( By Dev7Studios ) on my website. I have to work it out with following scenario:

I mouse over on "Div A" and "Div B" gets highlight-ed. I have to work on jQuery no conflict mode. So far, the script I use is:

jQuery.noConflict();
jQuery(window).load(function() {

    jQuery('#A, #B').bind('mouseover', function(){
        jQuery(this).spotlight({exitEvent:'mouseover', speed:600});

    });

});

With following script, each of the divs get highlighted when mouseover but, I need to make it the way that when mouseovered "Div A", "Div B" gets highlighted. This would be ideal solution.

Possible solution can also be that when mouse over on "Div A", "Div B" gets highlighted together with Div A.

At this moment, with the script I have, Only that Div is getting highlighted, whichever has the mouseover on it.

Any ideas please?

Thank you!

Answer 1

Just call the jQuery selector on #b after you mouseover on #a...like below.

jQuery('#A').bind('mouseover', function(){
  jQuery('#B').spotlight({exitEvent: 'mouseover', speed:600});
});

Answer 2

Update per OP comment:

You could create a map of which elements impact the others.. Perhaps A impacts Z, B impacts A, etc. This is defined by you.. Then you just loop over the map's values

Demo: http://jsfiddle.net/lucuma/4RFWQ/1/

 var map = { 
"#A" : "#B",
"#B" : "#A",
"#Z" : "#A"
}; 

jQuery.each(map, function(key, value) { 
  var val = value;
  jQuery(key).on('mouseover', function() {
      jQuery(val).spotlight({exitEvent:'mouseover',      speed:600});
  });

});​

You could also loop over the array and bind

Original:

I think you should do something like this to generalize it:

<div id="a" data-coord="b"></div><div id="b" data-coord="a"></div><div id="z" data-coord="b"></div>

jQuery.noConflict();
jQuery(window).load(function() {

jQuery('#A, #B').bind('mouseover', function(){
    jQuery('#' + jQuery(this).attr('data-coord')).spotlight({exitEvent:'mouseover', speed:600});

});

});