CSS3 исчезает, а не скользит?

Question

Вот мой CSS:

#display {
    background: url('/src/images/icons/display.png') no-repeat 0 0;
    margin-right: 10px;
    height: 49px;
    width: 49px;
    float: left;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#display:hover{
    background: url('/src/images/icons/display.png') no-repeat 0 -49px;
}

с #display в качестве идентификатора якоря, когда я наводю на него вместо того, чтобы исчезать в спрайте на 49 пикселей под ним, скользит к нему ... в любом случае, чтобы получить егоисчезать?

Answer 1

Чистый способ CSS сделать это будет следующим:

#display {
    background: url('/src/images/icons/display.png') no-repeat 0 0;
    margin-right: 10px;
    height: 49px;
    width: 49px;
    float: left;
}

#display:after {
    content: "";
    display: block;
    background: url('/src/images/icons/display.png') no-repeat 0 -49px;
    margin-right: 10px;
    height: 49px;
    width: 49px;
    float: left;
        opacity: 0;
-webkit-transition-property: opacity;
   -moz-transition-property: opacity;
     -o-transition-property: opacity;
    -ms-transition-property: opacity;
        transition-property: opacity;
-webkit-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
     -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
        transition-duration: 0.3s;
}

#display:after:hover {
    opacity: 1;
}

Что этот код делает, это использует псевдоэлемент CSS3: after, чтобы в основном создать совершенно новое изображение сверху, а затем затемнить егоот прозрачного к непрозрачному при наведении.

Единственная проблема заключается в том, что Firefox в настоящее время является единственным браузером, который поддерживает псевдоэлементы fading: before и: after.

Если у вас есть дочерний элементвнутри (как div или элемент), вы можете сделать это вместо этого:

#display {
    background: url('/src/images/icons/display.png') no-repeat 0 0;
    margin-right: 10px;
    height: 49px;
    width: 49px;
    float: left;
}

#display a {
    display: block;
    background: url('/src/images/icons/display.png') no-repeat 0 -49px;
    height: 49px;
    width: 49px;
    float: left;
        opacity: 0;
-webkit-transition-property: opacity;
   -moz-transition-property: opacity;
     -o-transition-property: opacity;
    -ms-transition-property: opacity;
        transition-property: opacity;
-webkit-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
     -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
        transition-duration: 0.3s;
}

#display:hover a {
    opacity: 1;
}

Надеюсь, это поможет:)

Answer 2

Я не совсем уверен, о чем вы спрашиваете, но он читает , как будто вы просите о помощи в исчезновении изменения цвета?Если это так:

#test {
    background-color: #fff;
    -webkit-transition: background-color 2s linear;
    -moz-transition: background-color 2s linear;
    -o-transition: background-color 2s linear;
    -kthml-transition: background-color 2s linear;
    transition:  background-color 2s linear;
}
#test:hover {
    background-color: #f90;
    -webkit-transition: background-color 2s linear;
    -moz-transition: background-color 2s linear;
    -o-transition: background-color 2s linear;
    -kthml-transition: background-color 2s linear;
    transition:  background-color 2s linear;
    -webkit-transition: background-color 2s linear;
}

Демонстрация JS Fiddle .

С другой стороны, если вы хотите, чтобы элемент исчез в:

#test {
    background-color: #fff;
    opacity: 0;
    -webkit-transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
    -kthml-transition: opacity 2s linear;
    transition:  opacity 2s linear;
    -webkit-transition: opacity 2s linear;
}
#test:hover {
    background-color: #f90;
    opacity: 1;
    -webkit-transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
    -kthml-transition: opacity 2s linear;
    transition:  opacity 2s linear;
    -webkit-transition: opacity 2s linear;
}

Демонстрация JS Fiddle .