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

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