Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
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


Чувашия-это моя Россия

Функция hover() в jQuery.

Общий вид функции выглядит так: hover( функция1, функция2)

При решении Ваших повседневных задач по интерактивности страниц сайта, часто придется сталкиваться с вопросами наведения указателя мыши на какой-либо объект ( элемент выборки документа страницы сайта) или снятии указателя мыши с элемента выборки, появятся другие вопросы по переключению посредством шелчка кнопки мыши.

За примером далеко ходить не надо, навели на меню страницы курсор мыши появилось выпадающее подменю, сняли курсор - подменю пропало. Такие событие хорошо обрабатывает функция hover(). Обычное выражение выглядит так:

                        $('селектор').hover(функция1, функция2);

Обычно вместо двух аргументов функции hover() применяют две анонимные функции function(){...}. Точно также данное событие происходит как и в CSS при наведении указателя мыши на элемент страницы проявляется и при сдвиге указателя мыши с данного тега выбранный элемент скрывается.

Допустим у нас есть видимый блок меню с id="menu" и при наведении на него должен проявиться субменю с id="submenu" тогда код нашей программы пишется так:

                       < style>
                               #menu { background-color: #36F; 
                                       color: #930;
                                       margin: 20px auto 20px 100px;
                                       height: 30px; width: 60px;
                                       padding: 2px; 
                                       font-size: 16px;
                                        text-align: center; 
                                        }
                                        
                         #submenu li { background-color: #F9C;
                                       color: #30C; 
                                       margin: 20px auto 20px 160px; 
                                       height: 20px; 
                                       width: 200px; 
                                       text-decoration: none; 
                                       text-align: center; 
                                       }
                       < /style>
                       
                       < script type="text/javascript">$(document).ready(function(){
                                   $('#menu').hover(function() {
                                   $('#submenu').fadeIn(800);
                                   },
                                   function() {
                                   $('#submenu').fadeOut(1500);
                                });
                             });
                        < /script>
                        
                        < ul id="menu">Меню< /ul>
                        
                        < ol id="submenu">
                            < li>Первая строчка< /li>
                            < li>Вторая строчка< /li>
                            < li>Третья строчка< /li>
                        < /ol>

Наведите курсор мыши на синию клетку со словом "Меню." и проявиться выпадающее подменю с тремя строками. Убираете курсор мыши, исчезает подменю.

Здесь применена вместо функции проявления элемента выборки show() - функция fideIn(800) с задержкой проявления на 800 миллисекунд и вместо функции скрытия hide() проявленного элемента - функция fideOut(1500) с задержкой скрытия на полторы секунды.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: