Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Плавные эффекты при наведении

Плавные эффекты при наведении


     05.07.2013    Общие вопросы по вёрстке    2143

вопрос
Здравствуйте ув. Пользователи и знатоки DLE и Верстки.
Прошу Вас помочь мне с моим вопросом.

Мне нужен скрипт hover эффектов, лазил в интернете - нашел только мусор.

Например:

Нужно чтобы ссылка при наведении плавно изменяла свой цвет.


.stil a {color: #fff;}
.stil a:hover {color: #000;}


Ссылка



Нужно чтобы прозрачность картинки плавно изменялась.


.stil img {opacity: 0.5;}
.stil img:hover {opacity: 1.0;}






Нужно чтобы фон плавно изменялся.


.kvadrat {background: url("image.jpg") repeat-x;}
.kvadrathover {background: url("image2.jpg") repeat-x;}


Контент



вообщем (у меня по русскому языку двойка, я не знаю, что в русском языке не существует слова вообщем) желательно простое решение проблемы.
Готов вознаградить за хорошее и простое в применение решение.

Ответил: D0Gmatist


Допиши в
.stil img {
    opacity: 0.5;
}
.stil img:hover {
    opacity: 1.0;
}


-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;


Итог
.stil img {
    opacity: 0.5;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.stil img:hover {
    opacity: 1.0;
}

Комментарии пользователей (1)

Nagibaka
5

42 | 34

Nagibaka - 8 июля 2013 15:06 - Эксперт

onneuha, привет.

Если для вас ие8 и хуже, не критичны, то используйте transition.
Примеры можете тут посмотреть http://www.xiper.net/manuals/css/properties/transition.html или загуглить.

Чтобы плавно изменять картинку - можно воспользоваться спрайтовой техникой http://blog.w3conversions.com/2011/03/changing-a-background-image-with-css3-transitions/ либо сделать 2 блока, спозиционированных друг под другом и опять же через transition менять им opacity.

Если ие8 и ниже критичны - то придется использовать jQuery animate - вот тут можно посмотреть http://jquery-docs.ru/Effects/animate/ - там просто задаете необходимые параметры для hover-события.

Frontend MotherFucker=:^^

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы