Question

I want a new <div> to appear on thumbnail hover.

You can inspect my code on http://techgeek.lt/naudinga/

This works:

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

but it hovers on #main.

I already tried (and no luck):

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

This works:

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

Both :first-child and the general sibling combinator (~) are supported in IE7+ and all modern browsers.

---

You need to fix that first a in each post:

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

that’s broken HTML, which causes the selector I’ve provided to fail in some browsers.