CSS 选择器问题。有什么想法如何选择这个吗？

Question

我想要一个新的

出现在缩略图悬停上。

您可以在 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;
}

:first-child 和 通用同级组合器 (~) 在 IE7+ 和所有现代浏览器中受支持。

---

您需要修复每篇文章中的第一个 a：

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

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

Answer 2

您可以使用+选择器类型。

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

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

更新：我测试了它，它对我有用。这是 jsfiddle。