CSS selector problem. Any ideas how to select this?

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;

@Lokys: "Please fix all my code" is generally not an acceptable "question" on this site - see the FAQ. Please narrow down and clarify. But for starters - fix your <script> tags - they all give 404s. — Gustav Barkefors
– Gustav Barkefors, Commented Aug 19, 2011 at 19:21
Gustav, what do you mean by "fix script tags"? It seems like they work fine for me.. — Lokys Borusevicius
– Lokys Borusevicius, Commented Aug 19, 2011 at 19:25
Here's one dead script tag and there's a bunch more. Also, you need to "include" jQuery before the plugins. And you seem to have curly quotes inside the <link rel="image_src"... element. — Sparky
– Sparky, Commented Aug 19, 2011 at 21:51
Your entire page is also missing the closing </body> and </html> tags. I've never seen the W3C Validator choke on a page before... no doubt from the � symbols (curly quotes?) on line 4. — Sparky
– Sparky, Commented Aug 19, 2011 at 21:59

thirtydot · Accepted Answer · 2011-08-19 19:40:12Z

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.

edited Aug 19, 2011 at 19:40

answered Aug 19, 2011 at 19:28

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

thirtydot Over a year ago

Note that I've updated my answer since I first posted it. Grab the newer version of the selector, it solves an issue with Firefox.

Lokys Borusevicius Over a year ago

Thanks again! I would love to have such css skills in the future.

mwcz · Accepted Answer · 2011-08-19 19:34:27Z

1

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.

edited Aug 19, 2011 at 19:34

answered Aug 19, 2011 at 19:29

mwcz

9,47110 gold badges46 silver badges65 bronze badges

Collectives™ on Stack Overflow

CSS selector problem. Any ideas how to select this?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related