Can I control CSS selection for :hover on nested e

问题:

I'm trying to figure a solution out to the following. I have the following HTML:

<div style="width:50em; height:10em">
    <span class='rating-5 rating-span'>
        <span class='rating-4 rating-span'>
            <span class='rating-3 rating-span'>
                <span class='rating-2 rating-span'>
                    <span class='rating-1 rating-span'>
                        <div class='rating-star unselected'></div>
                    </span>
                    <div class='rating-star unselected'></div>
                </span>
                <div class='rating-star unselected'></div>
             </span>
             <div class='rating-star unselected'></div>
         </span>
         <div class='rating-star unselected'></div>
     </span>
</div>

and the following CSS:

div.rating-star{
    display:inline-block;
    width:20%;
    height:100%;
    /*border:solid thin black;*/
    padding:0px;
    margin:0px;
}

div.rating-star.unselected {
    background-image: url(star.jpg);   
    background-size: contain;
    background-repeat: no-repeat;
}

.rating-span:hover div.rating-star {
    background-image: url(hover.jpg);   
    background-size: contain;
    background-repeat: no-repeat;
}

The idea is that, if you hover over a star, all the stars from the left will light up. However, what actually happens is that all of the stars light up, wherever you hover.

Now it's clear to me that this is because my :hover selector is selecting the outermost span. My question is this: in the case of the :hover selector, there is a determination of which element is being hovered over. In the case where that element contains other elements (of the same type), is there a way to stipulate which element should be selected. In this case it would be the lowest possible one.

I appreciate that I could do this quite simply with Javascript; I'm just hoping that there's a pure CSS solution to it.

UPDATE Here's a JSFiddle: http://jsfiddle.net/MkJmj/1/ It's slightly modified to use absolute urls to the images, but otherwise identical

回答1:

A Pure CSS Solution

jsFiddle: http://jsfiddle.net/alecgorge/Sw5Ym/

This is a pure CSS solution. I would recommend changing the HTML, but this was a fun exercise. Here is what I changed:

div.rating-star{
    display:inline-block;

...

.rating-span:hover div.rating-star {

to

div.rating-star{
    display:block;
    float:right;

...

.rating-span:hover > div.rating-star {

A better solution

By changing the div's to span's you have valid HTML (although a bit messy), and you can have a fully IE 7+ compatible solution: http://jsfiddle.net/alecgorge/FEHuw/

Make sure you resize the window to show all the stars on one line. Once the star image is smaller, the span's can be smaller and things will work better.

回答2:

I've simplified your HTML, since it was both invalid and unwieldy (not to mention difficult to target easily with CSS selectors). And, with that modified HTML, the CSS (below) seems to work as you want. Though it's tested only in Chromium 14, older browsers will almost certainly not quite work. Nor Internet Explorer (at all, at a guess):

HTML:

<div>
    <div class='rating-star unselected'></div>
    <div class='rating-star unselected'></div>
    <div class='rating-star unselected'></div>
    <div class='rating-star unselected'></div>
    <div class='rating-star unselected'></div>
</div>

And the CSS:

div:hover div.rating-star:hover ~ div.rating-star {
    background-image: url(http://danrumney.co.uk/images/star.jpg);   
    background-size: contain;
    background-repeat: no-repeat;
}

JS Fiddle.