我可以控制CSS选择：悬停在嵌套的元素？ [英] Can I control CSS selection for :hover on nested elements?

问题描述

我试图找出一个解决方案到以下。我有以下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：contains; 
 background-repeat：no-repeat; 
} 
 
 .rating-span：hover div.rating-star {
 background-image：url（hover.jpg）; 
 background-size：contains; 
 background-repeat：no-repeat; 
} 
  

想法是，如果你将鼠标悬停在一颗星上，左边会亮起来。
然而，实际上发生的是所有的星星点亮，无论你在哪里悬停。

现在我明白了这是因为我的：hover选择器正在选择最外面的span。我的问题是这样的：在：hover选择器的情况下，确定哪个元素被悬停。在该元素包含其他元素（相同类型）的情况下，是否有一种方式来规定应该选择 元素。在这种情况下，它将是最低的可能的一个。

我明白我可以做相当简单的Javascript;我只是希望有一个纯CSS解决方案。

UPDATE
这里是一个JSFiddle： http://jsfiddle.net/MkJmj/1/
它稍作修改以使用绝对urls的图像，

jsFiddle： a href =http://jsfiddle.net/alecgorge/Sw5Ym/ =nofollow> 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 的可以更小，事情会更好。

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

解决方案

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.

这篇关于我可以控制CSS选择：悬停在嵌套的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！