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;
}

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

---

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

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

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