Могу ли я контролировать выбор CSS для: hover на вложенных элементах?

Question

Я пытаюсь найти решение для следующего.У меня есть следующий 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>

и следующий 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;
}

Идея состоит в том, что при наведении курсора на звезду все звезды слева загорятся,Однако то, что на самом деле происходит, так это то, что все звезды горят, где бы вы ни находились.

Теперь мне ясно, что это потому, что селектор my: hover выбирает самый внешний диапазон.Мой вопрос таков: в случае селектора: hover, есть определение того, над каким элементом находится указатель мыши.В случае, если этот элемент содержит другие элементы (того же типа), существует ли способ указать , какой элемент должен быть выбран.В этом случае это будет наименьший возможный.

Я ценю, что мог бы сделать это довольно просто с Javascript;Я просто надеюсь, что есть чистое решение CSS для этого.

ОБНОВЛЕНИЕ Вот JSFiddle: http://jsfiddle.net/MkJmj/1/ Это немного изменено, чтобы использовать абсолютные URL-адреса для изображений, но в остальномидентичный

Answer 1

Чистое решение CSS

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

Это чистое решение CSS.Я бы порекомендовал изменить HTML, но это было забавное упражнение.Вот что я изменил:

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

...

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

на

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

...

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

Лучшее решение

Путем замены div на span у вас естьдопустимый HTML (хотя и немного грязный), и вы можете иметь полностью совместимое с IE 7+ решение: http://jsfiddle.net/alecgorge/FEHuw/

Убедитесь, что вы изменили размер окна, чтобы показать все звезды на одной строке.Как только изображение звезды станет меньше, span станет меньше, и все будет работать лучше.

Answer 2

Я упростил ваш HTML, поскольку он был и недействительным, и громоздким (не говоря уже о том, что трудно легко ориентироваться с помощью селекторов CSS). И с этим измененным HTML, CSS (ниже), кажется, работает, как вы хотите. Хотя он протестирован только в Chromium 14, старые браузеры почти наверняка не будут работать. Ни Internet Explorer (вообще, на догадках):

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>

И 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 .