悬停第一格会影响所有其他第一格

Question

I'm asking a basic question here, for some reason I can't get it to work. Any help will be appreciated.

Here's what I'm trying to do using either CSS or JQUERY http://css-tricks.com/examples/RowColumnHighlighting/example-two.php

Basicaly I have:

<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>

I want to be able to hover the first div in any of the blocks and all the other first div will be highlighted as well. Same thing for the second or third div of each block. I hope I'm explaining this correctly.

If there's any other related post I don't mind.

Thank you very much.

Answer 1

You could try something like

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

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

Answer 2

here we go. working jsfiddle example: 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');
    }
})                        
})

you should use jQuery index() method. Read more here - http://api.jquery.com/index/ Hope this helps