javascript - 悬停第 1 个 DIV 影响所有其他第 1 个 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 悬停在任何块中，并且所有其他第一个 div 也将突出显示。每个块的第二个或第三个 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/ 希望这会有所帮助

Answer 2

你可以尝试类似的东西

div.block1:hover>div *{
    color:red;
}

div.block1 div:hover>div *{
    color:red;
}