淡水狗
2018-03-14 18:17
.rating{ position:relative; width:240px; height:45px; margin:250px auto; background:url(images/icon.png) repeat-x; } .rating-item{ position:absolute; top:0; z-index: 3; width:48px; height:45px; } .rating-item-1{ left:0px; } .rating-item-2{ left:48px; } .rating-item-3{ left:96px; } .rating-item-4{ left:144px; } .rating-item-5{ left:192px; } .rating-item-1:hover,#rating-1:checked + .rating-item{ width:48px; } .rating-item-2:hover,#rating-2:checked + .rating-item{ width:96px; } .rating-item-3:hover,#rating-3:checked + .rating-item{ width:144px; } .rating-item-4:hover,#rating-4:checked + .rating-item{ width:192px; } .rating-item-5:hover,#rating-5:checked + .rating-item{ width:240px; } .rating-item label{ display:inline-block; width:100%; height:100%; cursor: pointer; } .rating input:checked + .rating-item{ left:0; background:url(images/icon.png) repeat-x 0 -45px; z-index:1; } .rating-item:hover{ left:0; z-index: 2; background:url(images/icon.png) repeat-x 0 -45px ; } .rating:hover .rating-item{ background-image:none; } .rating-item:hover{ background:url(images/icon.png) repeat-x 0 -45px !important;} .rating input:checked + .rating-item ~ .rating-item:hover{ z-index: 0; }
因为第二个rating-hover上面有background-image为none,且权重比较高,所以第二个会加上!important提高权限避免被none掉。所以我觉得是不是第一个hover的background可以去掉。。
两次的.rating-item:hover完全可以合并到一块,不会有啥毛病
星级评分原理和实现(下)
12756 学习 · 23 问题
相似问题