CSS selector problem. Any ideas how to select this?


Tags: css,css-selectors

Problem :

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;


Solution :

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.


    CSS Howto..

    How to position a background image without background-position property

    How to keep styles after animation?

    How to get button groups that span the full width of a parent in Bootstrap?

    how do you modify the actual css of a class rather than add a style to each element of that class? [duplicate]

    How can I make a DIV cursor and background color change if I hover over it?

    How to deal with image references in CSS in a Rails 3.1 app

    How do I set the height of an iframe with the min-height property in the body?

    How to apply CSS to second word in a string?

    CSS: position: absolute together with margin: auto for centering - How does that work?

    How do I make this responsive layout with CSS?

    How to set a External SVG color in HTML using CSS?

    How to make div size bigger?

    How to center
      in a page?

    CSS / Javascript: hidden div does not take full width after being shown

    How to center align circles?

    How to make divs float on both ends of another div?

    CSS: How to center text with surrounding borders

    How to make a font gisha-regular?

    How to center my hmenu (no matter the resolution)?

    How to Set the Left and Top CSS Positioning of a DIV Element Dynamically Using JavaScript

    How do I use the alignment of one class and the font of another?

    CSS: 2-column table, how to make one column as small as possible but no wrap and the other as big as possible?

    How to center this grid layout with css? [closed]

    How to extend Navigation in CSS

    CSS: how to make scrollbar appear outside div's border?

    How to get this partially diagonal shape from an image in CSS

    how to set width of piechart in dc.js through css

    How to create transparent text on non-transparent background

    How to make vertical lines between list items using CSS?

    How to access smarty variable in css URL attribute?