Javascript.RU

Как задать 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>

Посмотреть пример

-1

Автор: BETEPAH, дата: 22 января, 2012 - 12:06
#permalink

Но тема называется Как задать 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);


Автор: Том (не зарегистрирован), дата: 28 марта, 2014 - 09:35
#permalink

Огромное спасибо! Неделю искал такое решение, вы спасли меня)


Автор: devote, дата: 26 января, 2012 - 03:00
#permalink

а для каких целей так извращаться? Неужели в будущем исчезнут события onmouseover и onmouseout? Народ вы хреней страдаете.


Автор: seoneo, дата: 27 января, 2012 - 11:10
#permalink

то что нужно
у меня на странице элементов 30 с одним классом
с помощью onmouseover, onmouseout заколебался делать


Автор: dmitriymar, дата: 27 января, 2012 - 23:59
#permalink

и что мешает 5 строчками скрипта подключить им всем события?


Автор: seoneo, дата: 28 января, 2012 - 12:49
#permalink

хотелось бы увидеть 5 строчек
если все правильно делать 5 строчками не обойтись
а конcтрукцию вида
onmouseover = function() {
doument.getelementbyclass
}
onmouseout = function() {
doument.getelementbyclass
}
сделает только говнокодер
и тем более написал уже что у меня только имена классов есть
а всякую хрень типа onmouseover="mv()" onmouseout="mo()" добавлять устаревший не красивый способ


Автор: cranx, дата: 2 февраля, 2012 - 23:38
#permalink

Комментарий удален


Автор: dmitriymar, дата: 23 марта, 2012 - 18:34
#permalink

Да уж.Смотрю со знаниями у вас напряг...зато самомнение раздуто непомерно
http://javascript.ru/tutorial/events
Слушатели событий на документ. В слушателе определять класс,id......элемента в каком произошло событие.
Итого:
Навеска слушателя кросбраузерно -2 строки
Кросбраузерное получение event-1 строка
Кросбраузерное получение target-1 строка
Проверка класса у target-1 строка
______________________________________
5 строк ровнодля каждого
или,если определять тип события -6 строк на всё


Автор: Erika, дата: 15 марта, 2012 - 23:52
#permalink

Я себе написала для этого функцию возврата.
Просто я как бы веб дизайнер. И мне надо было чтоб при наведении на элемент 0 подсвечивался и элемент 1 и наоборот. Элементов может быть сколько угодно.
Сразу если честно, пыталась найти в интернете. Но, мне для такой простой задачи выдавало 1000000... километровые коды. И это меня смутило (нафига?).
Помучившись несколько часов написала функцию которая возвращает позицию элемента на странице, вторая функция принимает и обрабатывает.
Просто, я ведь на страницы чужего сайла не могу дописать к каждому onmouseover||onmouseout||onclick. Пришлось выкручиватся)


Автор: Гость (не зарегистрирован), дата: 14 июня, 2012 - 23:00
#permalink

Да.. Комменты насмешили. Не ожидал на дате комментариев увидеть 2012 год. ))) Статья полезная и НУЖНАЯ в определенных случаях. А всем, кто еще пишет в аттрибутах тегов события, советую изучать jQuery. А лучше для начала поиск элементов в DOM.


Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 00:51
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 13:08
#permalink

Автор: Гость (не зарегистрирован), дата: 10 января, 2024 - 10:26
#permalink

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. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
5 + 2 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
gordon freeman
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum