为什么点击后 鼠标经过不能熄灭了。为什么视频里面出现两次.rating-item:hover{ } ?????

来源:2-4 代码实现--记住点击选中后的状态

淡水狗

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;
     }


写回答 关注

2回答

  • 旅行的癞蛤蟆
    2018-04-13 14:40:39
    已采纳

    因为第二个rating-hover上面有background-image为none,且权重比较高,所以第二个会加上!important提高权限避免被none掉。所以我觉得是不是第一个hover的background可以去掉。。

  • Zz皓
    2018-06-04 13:44:52

    两次的.rating-item:hover完全可以合并到一块,不会有啥毛病

星级评分原理和实现(下)

本课程主要讲解如何使用不同的方式来实现星级评分的效果。

12756 学习 · 23 问题

查看课程

相似问题