CODEWITHSUNDEEP
csscss-selectors
Lokys Borusevicius
Lokys Borusevicius

Reputation: 27

CSS selector problem. Any ideas how to select this?

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;

Upvotes: 0

Views: 140

Answers (2)

thirtydot
thirtydot

Reputation: 228302

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.

Upvotes: 1

mwcz
mwcz

Reputation: 9331

You may be able to use the + selector type.

If the div comes directly after the img, this should work:

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

Update: I tested it and it works for me. Here's the jsfiddle.

Upvotes: 1

Related Questions