Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
2 / 2 / 2
Регистрация: 14.10.2014
Сообщений: 216
1

Изменение background плавно сверху вниз при наведении курсора и убирании

19.03.2019, 10:28. Показов 1247. Ответов 2
Метки нет (Все метки)

Как я понимаю надо использовать toggle, но как?
Этот код не работает:
Javascript
1
2
3
4
5
6
7
8
9
10
$(".order-call")
        .mouseover(function() {
          $(this).toggle(function() {
             $(this).css("background", "red");
             }, function() {
             $(this).css("background", "green");                    
        })
        .mouseout(function(){           
                
        });
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
19.03.2019, 10:28
Ответы с готовыми решениями:

Плавно увеличить PictureBox при наведении курсора
Приветствую. Есть массив PictureBox, размер которых необходимо плавно изменять при наведении...

При наведении курсора на один блок, плавно выпадает другой
Грубо говоря я немного запутался с jQuery. Начал изучать не так давно. Прошу вас помочь мне...

Изменение background-image при наведении
Всем привет. Есть такой код: $(".leftSlider_btn").hover(function() {...

Изменение background-color при наведении на область
Уважаемые форумчане, помогите с идеей, как это реализовать: Есть карта svg, регионам присвоены id....

2
1887 / 1491 / 687
Регистрация: 17.11.2012
Сообщений: 6,467
24.03.2019, 22:18 2
transition - не?
0
Эксперт JS
2027 / 1086 / 408
Регистрация: 29.04.2016
Сообщений: 2,603
25.03.2019, 11:27 3
Лучший ответ Сообщение было отмечено maks_7 как решение

Решение

maks_7,

Можно так -> https://codepen.io/Mr_Sergo/pe... itors=1100
HTML5
1
2
<div class="myClass"></div>
<div class="myClass"></div>
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
.myClass{
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0px -100px;
    background-color: #ddd;
    margin: 5px;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
 
.myClass:hover{
    background-position: 0px 0px;
}
 
.myClass:nth-child(1){
    background-image: url(https://pp.userapi.com/c846217/v846217941/1d06c7/46ZoBP1e9FU.jpg);
}
 
.myClass:nth-child(2){
    background-image: url(https://pp.userapi.com/c846217/v846217941/1d06ce/SYQn5mpdp74.jpg);
}
Добавлено через 3 минуты
или так -> https://codepen.io/Mr_Sergo/pe... itors=1100
HTML5
1
2
<div class="myClass"></div>
<div class="myClass"></div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.myClass{
    width: 100px;
    height: 100px;
    background-color: #ddd;
    margin: 5px;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
 
.myClass:nth-child(1):hover{
    background-color: red;
}
 
.myClass:nth-child(2):hover{
    background-color: green;
}
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.03.2019, 11:27

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Есть ли способ плавно вывести бордер при наведении, ну и плавно скрыть
Необходимо плавно вывести границу при наведении, и плавно чтобы скрывалась если убрать курсор. Что...

Изменение элемента при наведении курсора
Существует картинка, при наведении на нее она меняется. Это я реализовал... Но я не могу...

Изменение курсора при наведении на объект
Хочу сделать так b.cursor:=windows.forms.cursors.WaitCursor; а выдаёт: menu.pas(33) : cursor не...

Изменение фона при наведении курсора
Здравствуйте, хочу замутить оглавление книги и чтобы при наведении курсора на строку с названием...


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

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

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