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

您可以尝试类似

的内容

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

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

Answer 2

我们走了。工作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影响所有其他第一个DIVS

2 个答案: