Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
Farrewa
29 / 29 / 22
Регистрация: 27.12.2013
Сообщений: 368
1

При наведении курсора на один блок, плавно выпадает другой

02.05.2015, 14:19. Просмотров 1159. Ответов 1
Метки нет (Все метки)

Грубо говоря я немного запутался с jQuery. Начал изучать не так давно. Прошу вас помочь мне разобраться.
Ну вот например у меня есть:
HTML
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
                    <div id="header_b">
                    <div id="header_m">
                        <ul>
                            <li><a href=#>Главная</a></li>
                            <li><a href=#>Контакты</a></li>
                            <li><a href=#>О нас</a></li> 
                            <li><a href=#>Жалобы и предложения</a></li>
                            <li><a href=#>Вакансии</a></li>
                        </ul>
                    </div>
                    <div id="header_lk">
                        <a>Вход</a>
                        <div id="lk_form">forma log pass</div>
                    </div>
                </div>

CSS
Кликните здесь для просмотра всего текста
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
75
76
77
78
79
80
81
82
83
84
85
86
87
#header_b{
    width: 100%;
    height: 40px;
    background: rgba(255, 195, 0, 0.7);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9); 
}
 
#header_m{
    width: 50%;
    height: 40px;
    margin-left: 100px;
    float: left;
}
 
#header_lk{
    width: 90px;
    height: 40px;
    float: right;
    margin-right: 100px;
}
 
#header_lk a{
    text-decoration: none;
    font-family: arial;
    font-style: bold;
    font-size: 20px;
    padding: 0px 20px;
    height: 40px;
    display: block;
    line-height: 40px;
    color: #fff;
    text-shadow: 1px 1px 1px #000;  
}
 
#header_lk a:hover{
    background: #000;
    color: #fff;
    text-shadow: 1px 1px 1px #fb0;
}
 
 
 
 
#header_m ul {
    list-style: none;
    float: left;
    width: 1000px;
    height: 40px;
    margin: 0 auto;
    padding: 0;
}
 
#header_m ul li {
    float: left;
}
 
#header_m ul li a { 
    text-decoration: none;
    font-family: arial;
    font-style: bold;
    font-size: 20px;
    padding: 0px 10px;
    height: 40px;
    display: block;
    line-height: 40px;
    color: #fff;
    text-shadow: 1px 1px 1px #000;  
}
 
#header_m ul li a:hover{
    background: #000;
    color: #fff;
    text-shadow: 1px 1px 1px #fb0;
}
 
#lk_form{
    width: 250px;
    height: 300px;
    background: rgba(255, 255, 255, 0.6);
    margin-left: -150px;
    display: none;
}
 
/*header_lk:hover #lk_form {
    display: inline-block;
}
*/


Ну тут все понятно... есть вертикальное меню, есть раздел под кнопки меню и отдельно с права красуется кнопка "Вход"
Имеется также блок 250х300 и он скрыт (display: none; ).
Мне нужно при наведении курсора на "вход" показывать это скрытый блок. Да я могу использовать
CSS
1
2
3
header_lk:hover #lk_form {
    display: inline-block;
}
и все будет отлично. Но я хотел бы чтобы этот блок плавно выплывал сверху вниз... ну неважно как, главное чтобы плавно появлялся. Я перерыл много учебников и примеров, но там в основном пишется о том как плавно показывать "подсказки", элементы меню ( ul li ), но про divы сказано мало. Вот прошу вас помочь мне разобраться.

P.S. я не прошу готового решения, я прошу понятного примера с пояснением или ссылочку туда где можно почитать об этом.

Кликните здесь для просмотра всего текста
При наведении курсора на один блок, плавно выпадает другой
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
02.05.2015, 14:19
Ответы с готовыми решениями:

При наведении на один блок, появляется другой блок и прячется если на блок не наводить
Как тут

При наведении на один объект - изменяем другой
как сделать так, что б при наведении мыши на &lt;div class = &quot;a_menu&quot;&gt; изменялся цвет ссылки (именно...

Всплывание блока, при наведении на другой блок
При наведении на красный или синий блок должен поверх него всплывать другой блок (которому задан...

Кнопка, плавно меняющая цвет при наведении
не могу разобраться как добавить цвета. их должно быть 16, а у меня получился только 1 &lt;html&gt;...

При наведении на полупрозрачную картинку, прозрачность увеличивается на 100%(плавно)
При наведении на полупрозрачную картинку, прозрачность увеличивается на 100%(плавно), при отведении...

1
Armi
310 / 104 / 69
Регистрация: 18.04.2015
Сообщений: 342
02.05.2015, 15:12 2
Лучший ответ Сообщение было отмечено Farrewa как решение

Решение

Javascript
1
2
3
4
5
6
$(document).ready(function(){
$("#header_lk").hover(function(){
$("#lk_form").slideToggle("300");
});
 
});
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
02.05.2015, 15:12

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

При наведении на пункт меню выпадает только один подпункт из трех имеющихся
Добрый день! Помогите пожалуйста разобраться с модулем меню. На сайте установлен модуль superfish...

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


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

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

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