Необходимо установить одновременно некоторые CSS-свойства какого-либо элемента
Необходимо установить одновременно некоторые CSS-свойства какого-либо элемента, например, изменить визуальное представление элемента a в момент наведения на него указателя мыши.
Решение
И снова нам пригодится метод css() для решения этой задачи (листинг 4.1.3).
Листинг4 .1 .3 . Использование метода css(properties)
|
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 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title>example-4-1-3</title> <content> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> <style type="text/css"> a { color:#000; background-color:#eee; } </style> <script type="text/javascript"> $(function(){ $("a").hover( function(){ $(this).css({ "background-color":"#999", "color":"#fff", "font-weight":"bold" }); }, function(){ $(this).css({ "background-color":"#eee", "color":"#000", "font-weight":"normal" }); } ); }); </script> </head> <body> <a href="http://jquery.com/">Библиотека jQuery</a><br /> <a href="http://jqueryui.com/">UI jQuery</a><br /> <a href="http://blog.jqueryui.com/">Блог UI jQuery</a> </body> </html> |
Обсуждение
В соответствии с условием задачи в HTML-коде, приведенном в листинге 4.1.3, присутствуют три элемента a, визуальное представление которых по умолчанию определено с помощью CSS.
Чтобы изменить отображение этих элементов, необходимо сначала отыскать их, что мы и делаем, указав в селекторе название тега. Затем применим к выбранным элементам метод hover(), который принимает в качестве аргументов две функции. Первая будет выполняться в момент наведения указателя мыши на элемент a, а вторая — при выходе его за пределы элемента. Если мы сможем внутри этих функций изменить сразу несколько значений CSS-свойств, то задача будет решена. А это сделать нетрудно.
В контексте рассматриваемых функций указатель this ссылается на тот элемент a, на который был наведен указатель мыши, соответственно, применив к объекту, на который ссылается указатель, метод css(), можно изменить сразу несколько CSSсвойств этого объекта, т. е. выбранного элемента a.
При наведении мыши на ссылку мы задаем темно-серый цвет фона, белый цвет шрифта и делаем его начертание полужирным, а в момент выхода указателя мыши за пределы ссылки возвращаем начальные значения (светло-серый фон, черный шрифт и отменяем полужирное начертание).
Передавая методу css() в качестве аргумента объект с названиями и значениями CSS-свойств, мы можем установить значения этих свойств.
Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)
Похожие посты:
- Создание настоящей Репутации (0)
- Стратегически важный контент, обладающий огромной ценностью (0)
- Ведем дневник (0)
- Зарождение репутации (0)
- Анкор ссылки: «любовные письма» репутации (0)
- Что такое селекторы и как их правильно использовать (0)
- Создание «резинового» макета: слева – меню, а справа – область с контентом (0)