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 can I force CQ5.5 to ignore CSS data-uri-schemes?

    Compiling Bootstrap in LESS - How can I have a different navbar height for mobile?

    How to refer to css file in codeigniter?

    How to do img validation

    Hide one div when showing another with JavaScript

    How to customize in javascript?

    How can we customize vs2010 css editor template?

    Primefaces p:growl css. How to extend div message background color width

    How do I detect box-sizing border-box support with Modernizr

    How to animate DOM elements with JavaScript/CSS

    Parsing awful HTML: How do I recognize boundaries with xpath?

    How to access lower children using > operator?

    How to add multiple css rules to minimize browser reflows?

    How can I fix this parralax

    How can I separate a column on a web page depending on whether or not the browser is mobile?

    How to wrap Font-Awesome with CSS?

    How to make text to wrap image in editor

    How to add css into .scss file or theme

    How to add a CSS class to an element using a jQuery Selector?

    How to make rounded corner cut-out using CSS?

    How can I caption an image inside a paragraph

    ?

    CSS - How to display dropdown text in one row?

    How to use custom field to add class to a post?

    I have a div with a pseudo :after element creating a circle after it. How can I add something else inside that circle?

    how to correctly render a response on an gsp from on the same page as the request (REST call) in grails

    How to properly preload images, js and css files?

    How to remove border in radial gradient so that it can mix well?

    How to stretch an element out vertically so that it is always at least as tall as its sibling?

    How to create a pulsing glow ring animation in CSS?

    Dropdown not showing on small screens