我有一个有5个内联星的容器.
我需要的是当你将鼠标悬停在恒星,恒星和所有恒星之前获得不同的背景时. (我正在使用精灵,所以我改变了背景位置)
标记：
如果我使用兄弟组合器(〜)我会得到相反的效果.
.star:hover,.star:hover ~ .star
{
background-position: 0 -18px;
}
如何在徘徊之前为所有的星星实现这个？
最佳答案
对于任何感受到这个方向的人：rtl过于hacky(因为它从来没有真正设计为对齐一组星级图标),我推荐floating the stars to the right：
.star {
float: right;
width: 20px;
height: 15px;
background: url(stars.png) 0 -1px no-repeat;
}
由于包装器本身就是一个内联块,它仍然可以收缩.
就此而言,如果您认为自己真的讨厌内联块并希望完全抛弃它们,您甚至可以使用float the wrapper as well：
.wpr {
padding: 10px 20px;
border: 1px solid gold;
border-radius: 5px;
float: left;
position: relative;
font-size: 0;
}
