jQuery 聚焦问题

Question

我试图在我的网站上插入一个 jquery Spotlight sn-p（由 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

鼠标悬停在#a 上之后，只需调用#b 上的jQuery 选择器...如下所示。

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

});

});