jQuery Spotlight Issue

Question

Я пытаюсь вставить фрагмент jquery Spotlight (Dev7Studios) на мой сайт. Я должен решить это по следующему сценарию:

Я наведите курсор мыши на "Div A", и "Div B" выделится. Я должен работать на JQuery без конфликтного режима. Пока что я использую скрипт:

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

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

    });

});

С помощью следующего скрипта каждый из div-ов подсвечивается при наведении мыши, но мне нужно сделать так, чтобы при наведении мыши на "Div A", "Div B" выделялся. Это было бы идеальным решением.

Возможным решением также может быть то, что при наведении указателя мыши на "Div A", "Div B" выделяется вместе с "Div A."

В данный момент, с помощью сценария, который у меня есть, выделяется только тот Div, который наведен на него указателем мыши.

Есть идеи, пожалуйста?

Спасибо!

Answer 1

Просто вызовите селектор jQuery на #b после наведения мыши на #a... как показано ниже.

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

Answer 2

Обновление за комментарий OP:

Вы можете создать карту, элементы которой влияют на другие. Возможно, A влияет на Z, B влияет на A и т. Д. Это определяется вами. Тогда вы просто зацикливаетесь на значениях карты.

Демо: 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});
  });

});​

Вы также можете перебрать массив и связать

Оригинал:

Я думаю, что вы должны сделать что-то вроде этого, чтобы обобщить это:

<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});

});

});