Выделение ссылки при наведении на другую

@warobushek · Регистрация: 08.03.2008

Студворк — интернет-сервис помощи студентам

Возможно как-нибудь сделать так, чтобы одна ссылка выделялась,
когда пользователь наводит мышку на другую ссылку?

@BlackApricot · 08.11.2009, 14:56

По быстрому так

HTML5
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head>
<title>All</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<meta name="generator" content="CSE HTML Validator Халявной Версии">
<link rel="stylesheet" type="text/css" href="*.css">
<script type="text/javascript"><!--
function one(iD){
if(iD=="ONE1"){
document.getElementById("TWO1").style.color="green";
document.getElementById("ONE1").style.color="red";}
else{
document.getElementById("ONE1").style.color="red";
document.getElementById("TWO1").style.color="green";}
 };
function two(iD){
if(iD=="ONE1"){
document.getElementById("ONE1").style.color="green";
document.getElementById("TWO1").style.color="red";}
else{
document.getElementById("TWO1").style.color="red";
document.getElementById("ONE1").style.color="green";}
 };
--></script>
</head>
 
<body>
 
<a href="#" onmouseover="one(id);" onmouseout="two(id);" id="ONE1">ссылка 1</a>
<a href="#" onmouseover="one(id);" onmouseout="two(id);" id="TWO1">ссылка 2</a>
 
</body>
</html>

@warobushek · 08.11.2009, 19:01 **[ТС]**

Спасибо, но как использовать стили, которые заданы через class?

<ahref="#"onmouseover="one(id);"onmouseout="two(id);"id="ONE1" class="ONE1">ссылка 1</a>
<ahref="#"onmouseover="one(id);"onmouseout="two(id);"id="TWO1" class="TWO1">ссылка 2</a>

@GalaX · 08.11.2009, 19:36

Сообщение от warobushek

Спасибо, но как использовать стили, которые заданы через class?

document.getElementById('ONE1').classNam e = 'TWO1';

@BlackApricot · 08.11.2009, 21:12

Сообщение от warobushek

Спасибо, но как использовать стили, которые заданы через class?

Не понял вопроса?

Сообщение от warobushek

id="TWO1" class="TWO1"

Присвой им разные значения, id="TWO1" class="Two2", а то результат может быть не предсказуемым.

@warobushek · 08.11.2009, 21:49 **[ТС]**

Работает, если сделать вот таким образом

HTML5
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
<html><head>
<title>All</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<meta name="generator" content="CSE HTML Validator Халявной Версии">
<link rel="stylesheet" type="text/css" href="my.css">
<script type="text/javascript">
<!--
function test_over(id)
{
   aobj = document.getElementById(id);
   aobj.className="auxi";
}
 
function test_out(id)
{
   aobj = document.getElementById(id);
   aobj.className="test";
}
 
-->
</script>
</head>
 
<body>
<div class="test" id="oned">
<a href="#" onmouseover="test_over('twod');" onmouseout="test_out('twod');" id="ONE1">ссылка 1</a>
</div>
 
<div class="test" id="twod">
<a href="#" onmouseover="test_over('oned');" onmouseout="test_out('oned');" id="TWO1">ссылка 2</a>
</div>
 
</body>
</html>

my.css

CSS
1
2
3
4
5
6
7
8
.test a {outline: none;}
.test a:link    { color: #556368; text-decoration: none;}
.test a:visited { color: #556368; text-decoration: none;}
.test a:hover   { color: #c90103; text-decoration: none; }
.test a:active  { color: #c90103; text-decoration: none;}
 
.auxi a {outline: none;
        color: #c90103;text-decoration: none;}

Добавлено через 14 минут
Для каждой ссылки сделан свой div.
Можно ли без изменения класса div обойтись?
Идеально было бы использовать уже заданный для ссылки класс и лишь как то передовать события hover link и т.п.

@Милый Враг · 08.11.2009, 22:10

последний код, что вы выложили, это то же самое что предлогал вам BlackApricot а так же GalaX (подключение стилей..)

@warobushek · 09.11.2009, 07:01 **[ТС]**

Вот, именно, что хотелось бы сделать проще:
например, программно вызывать событие onmouseover

@Милый Враг · 09.11.2009, 09:12

Сообщение от warobushek

Вот, именно, что хотелось бы сделать проще:
например, программно вызывать событие onmouseover

проще некуда...
разве что прописать так

HTML5
1
<a href="url" onmouseower="this.className='xxx'" onmouseout="this.className='ddd'">links</a>

или другого элемента, не обязательно ссылки

@BlackApricot · 09.11.2009, 20:39

Милый Враг, так можно "самого себя", а просили перекрасить соседнюю. Или что-то путаю?
Возникает ещё один вопрос, почему такое простое решение не используют массово? Может оно не кроссбраузерно, или ещё какой камень под водой?.

@Vanstorm · 09.11.2009, 21:53

BlackApricot,
Да поидее особых камне быть не должно. Я по крайней мере не встречал. Ну разве что это не пойдёт у тех кто отключает javascript.

Не по теме:

Очепятка маленькая не onmouseower а onmouseover

@Милый Враг · 09.11.2009, 21:57

Милый Враг, так можно "самого себя", а просили перекрасить соседнюю. Или что-то путаю?

совершенно верно.. я просто перегрелся)))

Возникает ещё один вопрос, почему такое простое решение не используют массово? Может оно не кроссбраузерно, или ещё какой камень под водой?.

его и используют массово. просто обычно выносят все в отдельную функцию, как вам показывали раньше, чтоб не писать сто раз на каждом елементе код. За одно и не засорять сам код.

@BlackApricot · 10.11.2009, 07:51

Может через ДОМ, просто привычнее и очевиднее?
Кстати, в книгах такая версия ни разу не попалась.
Вариантов как всегда много, что "под руку" первым подвернулось, так и написал, главное что-бы заработало.

@Vanstorm · 10.11.2009, 20:46

Сообщение от BlackApricot

Кстати, в книгах такая версия ни разу не попалась.

В моей литературе classname есть. у пауэлла есть - если не ошибаюсь в разделе dom и css

@BlackApricot · 10.11.2009, 21:05

Vanstorm, кажется неправильно выразился, в книгах есть, в примерах не встречался этот вариант.

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@warobushek 2 / 2 / 1 Регистрация: 08.03.2008 Сообщений: 82

	Выделение ссылки при наведении на другую 08.11.2009, 08:55. Показов 3667. Ответов 14 Метки нет (Все метки) Возможно как-нибудь сделать так, чтобы одна ссылка выделялась, когда пользователь наводит мышку на другую ссылку? 0

@warobushek 2 / 2 / 1 Регистрация: 08.03.2008 Сообщений: 82
	08.11.2009, 19:01 [ТС]
	Спасибо, но как использовать стили, которые заданы через class? <ahref="#"onmouseover="one(id);"onmouseout="two(id);"id="ONE1" class="ONE1">ссылка 1</a> <ahref="#"onmouseover="one(id);"onmouseout="two(id);"id="TWO1" class="TWO1">ссылка 2</a> 0

@Милый Враг Телепат 724 / 118 / 8 Регистрация: 28.04.2009 Сообщений: 442
	08.11.2009, 22:10
	последний код, что вы выложили, это то же самое что предлогал вам BlackApricot а так же GalaX (подключение стилей..) 0

@warobushek 2 / 2 / 1 Регистрация: 08.03.2008 Сообщений: 82
	09.11.2009, 07:01 [ТС]
	Вот, именно, что хотелось бы сделать проще: например, программно вызывать событие onmouseover 0

@BlackApricot 288 / 131 / 4 Регистрация: 15.02.2009 Сообщений: 520
	09.11.2009, 20:39
	Милый Враг, так можно "самого себя", а просили перекрасить соседнюю. Или что-то путаю? Возникает ещё один вопрос, почему такое простое решение не используют массово? Может оно не кроссбраузерно, или ещё какой камень под водой?. 0

@Vanstorm 2773 / 341 / 22 Регистрация: 15.01.2008 Сообщений: 2,614
	09.11.2009, 21:53
	BlackApricot, Да поидее особых камне быть не должно. Я по крайней мере не встречал. Ну разве что это не пойдёт у тех кто отключает javascript. Не по теме: Очепятка маленькая не onmouseower а onmouseover 0

@BlackApricot 288 / 131 / 4 Регистрация: 15.02.2009 Сообщений: 520
	10.11.2009, 07:51
	Может через ДОМ, просто привычнее и очевиднее? Кстати, в книгах такая версия ни разу не попалась. Вариантов как всегда много, что "под руку" первым подвернулось, так и написал, главное что-бы заработало. 0

@BlackApricot 288 / 131 / 4 Регистрация: 15.02.2009 Сообщений: 520
	10.11.2009, 21:05
	Vanstorm, кажется неправильно выразился, в книгах есть, в примерах не встречался этот вариант. 0