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

这有效：

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

IE7 +和所有现代浏览器均支持:first-child和general sibling combinator (~)。

---

您需要在每个帖子中修复第一个a：

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

这是破坏的HTML，导致我提供的选择器在某些浏览器中失败。

Answer 2

您可以使用+ selector type。

如果div直接在img之后，这应该有效：

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

更新：我测试了它，它适用于我。这是jsfiddle。