Проблема селектора CSS. Есть идеи, как выбрать это?

Question

Я хочу, чтобы при наведении миниатюры появилось новое <div>.

Вы можете проверить мой код на http: //techgeek.lt/naudinga/

Это работает:

 #main:hover  .whitewrapper {
  display: block;
}

но он зависает на #main.

Я уже попробовал (и не повезло):

img.thumbnail:hover  .whitewrapper {
  display: block;
}

#main img.thumbnail:hover  .whitewrapper {
  display: block;
}

.thumbnail:hover  .whitewrapper {
  display: block;
}

img.thumbnail:hover  .whitewrapper {
  display: block;
}

img.thumbnail .alignleft:hover  .whitewrapper {
  display: block;
}

.thumbnail .alignleft:hover  .whitewrapper {
  display: block;
}

#main.thumbnail .alignleft:hover  .whitewrapper {
  display: block;
}

#main.thumbnail .alignleft img:hover  .whitewrapper {
  display: block;
}

.thumbnail .alignleft img:hover  .whitewrapper {
  display: block;
}

.thumbnail img:hover  .whitewrapper {
  display: block;

Answer 1

Вы можете использовать селектор типа + .

Если div приходит сразу после img, это должно сработать:

img.thumbnail:hover + .whitewrapper {
   display: block;
}

Обновление: я проверил это, и оно работает для меня. Вот это jsfiddle .

Answer 2

Это работает:

.post-more a:first-child:hover ~ .whitewrapper, .whitewrapper:hover {
    display: block;
}

Оба :first-child и общий родственный комбинатор (~) поддерживаются в IE7 + и во всех современных браузерах.

---

Сначала нужно исправить a в каждом сообщении:

<div class="post-more"> 
    <a href=".." onclick=".."<a title=".." href=".." >..</a></a>

это неработающий HTML, что приводит к сбою предоставленного мной селектора в некоторых браузерах.