javascript - 悬停第一个 DIV 会影响所有其他第一个 DIVS

Question

我在这里问一个基本问题，出于某种原因我无法让它工作。任何帮助将不胜感激。

这是我尝试使用 CSS 或 JQUERY 做的事情 http://css-tricks.com/examples/RowColumnHighlighting/example-two.php

基本上我有:

<div class="block1">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="block2">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="block3">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="block4">
  <div></div>
  <div></div>
  <div></div>
</div>

我希望能够将第一个 div 悬停在任何 block 中，并且所有其他第一个 div 也将突出显示。每个 block 的第二个或第三个 div 也是如此。 我希望我解释正确。

如果还有任何其他相关帖子，我不介意。

非常感谢。

Answer 1

我们开始吧。工作 jsfiddle 示例:http://jsfiddle.net/fLkRQ/

$("div[class^='block']").children('div').hover(function(e){

    var index = $(this).index();
    $("div[class ^='block']").children('div').each(function(){
    if ($(this).index() == index){
        $(this).addClass('highligted')
    } else {
     $(this).removeClass('highligted');
    }
})                        
})

你应该使用 jQuery index() 方法。在这里阅读更多 - http://api.jquery.com/index/ 希望这有帮助