Как задать hover на javascript через css? Без использования событий onmouseover и onmouseout
Как задать hover на javascript?
Есть такая вот ссылка
<a id="my_link" target="_blank" href="http://scriptjava.net/">ссылка</a>
Как с помощью javascript задать для нее вот такие стили
#my_link {
color:#113447;
text-decoration:none;
}
#my_link:hover {
color:#ff0000;
text-decoration:none;
}
Решение конечно есть и не одно:
Большинство начнут применять к элементу события onmouseover и onmouseout
Но тема называется Как задать hover на javascript через css? Без использования событий onmouseover и onmouseout а это значит что события не приемлемы.
Так же нужно учесть что на сайте вообще нет CSS и значит мы не сможем присоединить стиль ну даже допустим с помощью
document.styleSheets[0]
Вот мое самое простое решение на scriptjava:
<a id="my_link" target="_blank" href="http://scriptjava.net/">ссылка</a>
<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
<script type="text/javascript">
$$('my_link').$$('color','#113447').$$('textDecoration','none');
$$i({
create:'style',//создаю элемент style
attribute: {//устанавливаю атрибуты
'type':'text/css'
},
insert:$$s.getelbytag('head')[0]//подключаю стиль после тега head
}).$$('a#my_link:hover{color:#ff0000 !important;}');
</script>
Посмотреть пример
|
Но тема называется Как задать hover на javascript через css? Без использования событий onmouseover и onmouseout а это значит что события не приемлемы.
Так же нужно учесть что на сайте вообще нет CSS и значит мы не сможем присоединить стиль ну даже допустим с помощью
document.styleSheets[0]
А что мешает, если нет .styleSheets[0] создать его?
По-моему, без скриптджавы решение тоже не очень сложное:
var
head = document.getElementsByTagName('head')[0],
style = document.createElement('style'),
rules = document.createTextNode('a#my_link:hover{color:#ff0000 !important;}');
style.type = 'text/css';
if (style.styleSheet) style.styleSheet.cssText = rules.nodeValue; else style.appendChild(rules);
head.appendChild(style);
Огромное спасибо! Неделю искал такое решение, вы спасли меня)
а для каких целей так извращаться? Неужели в будущем исчезнут события onmouseover и onmouseout? Народ вы хреней страдаете.
то что нужно
у меня на странице элементов 30 с одним классом
с помощью onmouseover, onmouseout заколебался делать
и что мешает 5 строчками скрипта подключить им всем события?
хотелось бы увидеть 5 строчек
если все правильно делать 5 строчками не обойтись
а конcтрукцию вида
onmouseover = function() {
doument.getelementbyclass
}
onmouseout = function() {
doument.getelementbyclass
}
сделает только говнокодер
и тем более написал уже что у меня только имена классов есть
а всякую хрень типа onmouseover="mv()" onmouseout="mo()" добавлять устаревший не красивый способ
Комментарий удален
Да уж.Смотрю со знаниями у вас напряг...зато самомнение раздуто непомерно
http://javascript.ru/tutorial/events
Слушатели событий на документ. В слушателе определять класс,id......элемента в каком произошло событие.
Итого:
Навеска слушателя кросбраузерно -2 строки
Кросбраузерное получение event-1 строка
Кросбраузерное получение target-1 строка
Проверка класса у target-1 строка
______________________________________
5 строк ровнодля каждого
или,если определять тип события -6 строк на всё
Я себе написала для этого функцию возврата.
Просто я как бы веб дизайнер. И мне надо было чтоб при наведении на элемент 0 подсвечивался и элемент 1 и наоборот. Элементов может быть сколько угодно.
Сразу если честно, пыталась найти в интернете. Но, мне для такой простой задачи выдавало 1000000... километровые коды. И это меня смутило (нафига?).
Помучившись несколько часов написала функцию которая возвращает позицию элемента на странице, вторая функция принимает и обрабатывает.
Просто, я ведь на страницы чужего сайла не могу дописать к каждому onmouseover||onmouseout||onclick. Пришлось выкручиватся)
Да.. Комменты насмешили. Не ожидал на дате комментариев увидеть 2012 год. ))) Статья полезная и НУЖНАЯ в определенных случаях. А всем, кто еще пишет в аттрибутах тегов события, советую изучать jQuery. А лучше для начала поиск элементов в DOM.
Roksa krakow podgorze
Roksa katowixe
When playing phrazle on a computer or mobile device, you may use either a mouse or a touchpad to control the game. This game is comprised of a grid of jumbled words that are organized in a certain pattern.
Отправить комментарий
Приветствуются комментарии:- Полезные.
- Дополняющие прочитанное.
- Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.Для остальных вопросов и обсуждений есть форум.