Css hover не работает

Question

Вот мой код. Я сделал это - когда я навеваю табличную ячейку, тогда ее фоновое изображение изменилось, это было легко. Но я хотел бы сделать это, когда я нахожу ячейку 5 с классом = «вниз» в первой таблице, а второй атрибут отображения таблицы изменяется от ни одного к блоку. . Я искал это, и я закончил со всем этим кодом, и это не так, т работы. Мне нужно использовать чистый CSS без JavaScript. Где проблема и что я делал неправильно?

HTML

<table border="0" class="table"> 
    <tr> 
     <td>1</td> 

     <td>2</td> 

     <td>3</td> 

     <td>4</td> 

     <td class="down">5</td> 
    </tr> 
    </table> 

    <table border="0" class="table2"> 
    <tr> 
     <td>row2</td> 
    </tr> 

    <tr> 
     <td>row3</td> 
    </tr> 
    </table> 

CSS

.table 
{ 
    left:200px; 
    position:absolute; 
} 

td 
{ 
    background-image:url(poga1.png); 
    height:70px; 
    width:100px; 
} 

td:hover 
{ 
    -webkit-transition:1s; 
    background-image:url(poga2.png); 
} 

.table2 
{ 
    display:none; 
    left:616px; 
    position:absolute; 
    top:77px; 
} 

.down:hover .table2 
{ 
    display:block; 
} 

Answer 1

Вы не можете сделать это с помощью CSS, если Table2 не является дочерним элементом таблицы 1. Это можно сделать очень легко с помощью JavaScript (w/jQuery в этом случае). Проверьте мой пример здесь:

http://jsfiddle.net/Pb8dw/1/

$(document).ready(function() { 
    $(".down").mouseover(function(){ 
     $(".table2").show(); 
    }); 

    $(".down").mouseout(function(){ 
     $(".table2").hide(); 
    }); 
}); 

Это блок кода, который делает скрыть/показать на парении. Я позволил вам обновить исходный код, чтобы его было легче увидеть.

Update: Если вы абсолютно положительно, должны были сделать это без JavaScript, вот как это было бы вниз с помощью только CSS и HTML:

http://jsfiddle.net/Pb8dw/2/

Answer 2

.down:hover .table2 Линия ищет элемент с классом table2внутри элемента с классом down. Вы можете делать только то, что хотите, в чистом CSS, если ваши таблицы вложены. Вот как вы могли бы сделать то, что вы хотите с помощью JQuery:

$(document).ready(function() { 
    $('.down').hover(function() { 
     $('.table2').show(); 
    }, function() { 
     $('.table2').hide(); 
    }); 
}); 

Вот демо: http://jsfiddle.net/mchail/b6PKT/

я добавил границу на td элементов, так что легче увидеть, когда ваше событие парения должно вызвать.