html – 在悬停项目之前选择所有项目

发布时间：2020-12-14 23:18:30 所属栏目：资源来源：网络整理

导读：我有一个有5个内联星的容器. 我需要的是当你将鼠标悬停在恒星,恒星和所有恒星之前获得不同的背景时. (我正在使用精灵,所以我改变了背景位置) 标记：如果我使用兄弟组合器(?)我会得到相反的效果. .star:hover,.star:hover ~ .star{ background-position: 0 -

我有一个有5个内联星的容器.

我需要的是当你将鼠标悬停在恒星,恒星和所有恒星之前获得不同的背景时. (我正在使用精灵,所以我改变了背景位置)

标记：


如果我使用兄弟组合器(?)我会得到相反的效果.

.star:hover,.star:hover ~ .star
{
    background-position: 0 -18px;
} 

FIDDLE
如何在徘徊之前为所有的星星实现这个？


最佳答案
对于任何感受到这个方向的人：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;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!