Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 70, средняя оценка - 4.94
djwolf
0 / 0 / 0
Регистрация: 08.09.2011
Сообщений: 12
#1

Плавное изменение цвета при наведении мыши - HTML, CSS

15.11.2012, 17:58. Просмотров 9149. Ответов 2
Метки нет (Все метки)

Здравствуйте. помогите пожалуйста
Нужно чтобы на аккордион меню плавно менялся цвет кнопочек, нашел в интернете способ как это сделать, он работает но только как убираешь мышку с кнопки плавного затухания нет.
вот сайт http://sq6.ru/498AKr2
меню с картинкой Стиральные машины.
А вот и сам код
Кликните здесь для просмотра всего текста
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
#s5_accordion_menu {
    margin-top:-10px;
    margin-bottom:0px;
    margin-right:0px;
    margin-left:0px; 
    width:258px;
}
#s5_accordion_menu h3.s5_am_toggler {
    height:60px;
    line-height:31px;
    margin:0;
}
    
.s5_am_toggler:hover{
    background-color: rgba(57, 138, 164, 0.7);
    border-radius:4px; 
    -webkit-border-radius:4px; 
    -moz-border-radius:5px; 
    -khtml-border-radius:10px;
    
    -webkit-transition: all 0.5s ease;
    -webkit-transition-delay: 0.1s;
    -moz-transition: all 0.5s ease;
    -moz-transition-delay: 0.1s;
    -khtml-transition: all 0.5s ease;
    -khtml-transition-delay: 0.1s;  
    }
 
#current{
background-color: rgba(255, 0, 0, 0.3);
}
 
div.s5_accordion_menu_element li{   
    background-color: rgba(57, 138, 164, 0.7);
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
}
 
div.s5_accordion_menu_element li a:hover{
    background-color: rgba(57, 138, 164, 1);
    -webkit-transition: all 0.5s ease;
    -webkit-transition-delay: 0.1s;
    -moz-transition: all 0.5s ease;
    -moz-transition-delay: 0.1s;
    -khtml-transition: all 0.5s ease;
    -khtml-transition-delay: 0.1s;  
}
 
div.s5_accordion_menu_element li a {
    border-bottom: 1px solid #286275;
    color: #ffffff;
    cursor: pointer;
    display: block;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 6px;
    padding-left: 3px;
    padding-top: 6px;
}
    
* html div.s5_accordion_menu_element li a { 
        width:75%;
}
    
ul.s5_am_innermenu {
    margin-bottom:-1px;
    padding-left:0;
    margin-left:0;
    margin-top:0;
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
15.11.2012, 17:58
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Плавное изменение цвета при наведении мыши (HTML, CSS):

Изменение цвета и текста при наведении курсора мыши - HTML, CSS
Добрый вечер. Вот такой вот вопрос: "Как менять одновременно цвет и текст при наведении курсора мыши?" Вот код: ...

Изменение фонового цвета строки при наведении на нее указателя мыши - HTML, CSS
Доброе время суток Возникла проблема в следующим хочу сделать так чтобы при на ведения на строку таблице менялся её цвет. Нашел скрипт ...

Изменение цвета при наведении - HTML, CSS
Добрый вечер! Изучаю html+css. Дошел до практики и столкнулся со следующей проблемой: Как сделать,чтобы при наведении на...

Изменение цвета текста при наведении - HTML, CSS
нужно чтоб при наведении в область меннялся цвет области и цвет некоторого текста

Изменение цвета при наведении курсора - HTML, CSS
Всем, привет. Всем здравствуйте. Уважаемые гуру CSS. Need your help!!! В чем заключается вопрос. Нужна анимация ". Изменение цвета при...

Изменение цвета иконки при наведении - HTML, CSS
Подскажите, какими наиболее лучшими способами (по кросс-браузерности и кросс-платформенности) решить следующую задачу: имеется картинка на...

2
alexey.exe
3 / 3 / 0
Регистрация: 23.01.2010
Сообщений: 45
16.11.2012, 03:12 #2
У меня затухание есть
хром Версия 23.0.1271.64 m
0
djwolf
0 / 0 / 0
Регистрация: 08.09.2011
Сообщений: 12
16.11.2012, 20:22  [ТС] #3
нашлось решение

CSS
1
2
3
4
5
6
7
8
.s5_am_toggler{ 
-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
-khtml-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; 
}
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
16.11.2012, 20:22
Привет! Вот еще темы с ответами:

Изменение цвета рамки при наведении на картинку - HTML, CSS
Добрый день.Надо чтобы при наведении на картинку менялся цвет ее рамки.как сделать такую рамку? Заранее спасибо.

Изменение свойств элемента при наведении мыши - HTML, CSS
В общем нужна помощь , нужно вот такой эффект как на скрине при наведении, как это возможно организовать в HTML,CSS?

Изменение курсора мыши при наведении на кнопку - HTML, CSS
А как сделать, чтобы курсор мыши менялся при наведении на кнопку? Как при наведении на ссылку. Один вопрос - одна отдельная тема!

Изменение вона элемента при наведении курсора мыши - HTML, CSS
Имеется макет шапки сайта где кнопки меню светятся голубым цветом при наведении. если с нуля делать такую шапку то у меня все...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Рейтинг@Mail.ru