Question

我试图在我的网站上插入一个jquery Spotlight片段（By Dev7Studios）。我必须通过以下方案来解决这个问题：

我将鼠标放在＆＃34; Div A＆＃34;和＆＃34; Div B＆＃34;得到突出显示。我必须在jQuery上工作没有冲突模式。到目前为止，我使用的脚本是：

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

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

    });

});

使用以下脚本，鼠标悬停时每个div都会突出显示，但是，我需要按照鼠标移动的方式进行操作，然后使用＃34; Div A＆＃34;，＆＃34; Div B＆＃34;突出显示。这将是理想的解决方案。

可能的解决方案也可以是当鼠标悬停在＆＃34; Div A＆＃34;，＆＃34; Div B＆＃34;与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});

});

});

jQuery Spotlight问题

2 个答案: