Есть ли смежный селектор в CSS?

Question

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

Я нашел этот JSfiddle, который хорошо работал. http://jsfiddle.net/ZSZQK/

<div id="image"><img src="image.png"/></div> 

<div id="hover">Test message</div> 

#hover { 
    display: none; 
} 

#image:hover + #hover { 
    display: block; 
} 

Только мне нужно разделить мои дивы вверх, не означает, что они больше не являются смежными, как это. http://jsfiddle.net/Z2H66/

<div class="first-container"> 
    <div class="image"><img src="image.png"/></div> 
</div>  

<div class="second-container"> 
    <div class="hover">Test message</div> 
</div> 

.hover { 
    display: none; 
} 

.image:hover + .hover { 
    display: block; 
} 

Какие инструменты в моем распоряжении, которые в состоянии делать то, что я спрашиваю?

Также обратите внимание, что я изменил свой код на классы, а не на идентификаторы, но это не мешает работе. Мой код не работает, потому что div hover и image не смежны.

Answer 1

Пожалуйста, смотрите модифицированную версию JSFiddle, который использует Javascript и JQuery: http://jsfiddle.net/scorchio/ZSZQK/288/

JQuery позволит вам обрабатывать данные события, как это легко, ключ заключается в следующем:

$(document).ready(function() { 
    // Hide on start 
    $("#hover").hide(); 

    // Handle mouse over for image 
    $("#image").hover(function() { 
      // This one is when the mouse enters 
      $("#hover").show(); 
     }, 
     function() { 
      // ...and when it hides. 
      $("#hover").hide(); 
    }); 
}); 

Answer 2

Ну, ~ немного менее строг, но это не поможет вам :(

С чистым css, я думаю, это лучшее, что вы можете сделать:

.hover { 
    display: none; 
} 

.first-container:hover ~ .second-container .hover { 
    display: block; 
} 

См. this post about css parent selectors (не реализовано) и this link from one of the answers that has a javascript shim for it.

Кстати, ~ находится рядом, но не сразу смежно, в отличие от +.