Question

In this website I am making there is an arrow link that when you hover over it it becomes a new image with a cool addition to the image. I had this working completely fine with this code below and I did not edit the code at all but it seems that when I woke up the "all" transition no longer works for this. I can t find what is wrong. I am also using this to fade a background-image that is a solid color to fade to another background image that is a different solid color.

a.visitarrow
{
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
-ms-transition:all 1.0s ease-in-out;        
transition:all 1.0s ease-in-out;
display:block;
width:130;
height:121;
background-image:url( pictures/visit.png );
}

a.visitarrow:hover
{
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;        
transition:all 0.5s ease-in-out;
display:block;
width:130;
height:121;
background-image:url( pictures/visithover.png );
}

Answer 1

我认为,这项工作应当做到:

a.visitarrow {
    display: block;
    width: 130;
    height: 121;
    -webkit-transition: 1.0s ease-in-out;
    -moz-transition: 1.0s ease-in-out;
    -o-transition: 1.0s ease-in-out;
    -ms-transition: 1.0s ease-in-out;        
    transition: 1.0s ease-in-out;
    background-image: url( pictures/visit.png );
}

a.visitarrow:hover {
    background-image: url( pictures/visithover.png );
}

友情链接