now the mouse must be placed on the small icon before the picture can be switched. The user experience is too poor. How to switch
.showImage{
overflow:hidden;
margin: 0 auto ;
background-image: url(../img/nav_bg.png) ;
background-repeat:no-repeat;
width: 22px;
height: 22px;
}
li:hover{
overflow:hidden;
margin: 0 auto ;
background-image: url(../img/nav_bg.png) ;
background-repeat:no-repeat;
width: 22px;
height: 22px;
}
/* .showImage:hover{
background-image: url(../img/nav_bg.png);
}*/
.item0{
background-position: -235px -17px ;
}
.item0:hover{
background-position: -235px -55px ;
}
.item1{
background-position: -19px -17px ;
}
.item1:hover{
background-position: -19px -55px ;
}
.item2{
background-position: -63px -17px ;
}
.item2:hover{
background-position: -63px -55px ;
}
.item3{
background-position: -108px -17px ;
}
.item3:hover{
background-position: -108px -55px ;
}
.item4{
background-position: -152px -17px ;
}
.item4:hover{
background-position: -152px -55px ;
}
.item5{
background-position: -197px -17px ;
}
.item5:hover{
background-position: -197px -55px ;
}