悬停在第一个 DIV 上会影响所有其他第一个 DIV

Hover 1st DIV affect all other 1st DIVS

本文关键字：DIV 第一个 其他 影响 悬停      更新时间：2023-09-26

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

这是我尝试使用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 也是如此。我希望我正确地解释了这一点。

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

谢谢。

我们开始了。 工作 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/希望这有帮助

你可以尝试类似的东西 

div.block1:hover>div *{
    color:red;
}
div.block1 div:hover>div *{
    color:red;
}
相关文章：