Javascript-форум - Выделение ссылки при наведении на другую

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Выделение ссылки при наведении на другую (https://javascript.ru/forum/dom-window/6045-vydelenie-ssylki-pri-navedenii-na-druguyu.html)

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

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

если Вы имеете в виду меняла цвет, то это делается с помощью стилей и id-шника, например так:

<script>
function Light(id){
document.getElementById(id).style.color = 'FF0000';
}
</script>
<a id="a1" href="#">один</a>
<a id="a2" href="#" onmouseover="Light('a1')">один</a>

Если под выделением подразумевается другое, то и способ другой :)

Сорри, что не уточнил. Мне нужно выделять в соответствии с таблицей стилей, заданной для другой ссылки через атрибут class.

document.getElementById(id).className = 'drugoi_class';

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

Код:

<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

Код:

.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;}

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

можно, нужно изменять класс a, по id-шникку a
по: onmouseover меняем класс ссылки на нужный, "событие hover"
по: onmouseout меняем класс ссылки на обратный, "coбытие link"

<a href="#" onmouseover="test_over('two');" onmouseout="test_out('two');" id="one">ссылка 1</a>

<a href="#" onmouseover="test_over('one');" onmouseout="test_out('one');" id="two">ссылка 2</a>

или как я уже говорил до этого, все можно сделать через:

document.getElementById(id).style.свойствоОбъектаStyle = 'значение'

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

Цитата:

Сообщение от pikas (Сообщение 177145)

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

У однотипных ссылок прописываем один и тот же класс
при наведении на любую из данных ссылок добавляем на страницу тег <style id=Hover>classImxO{color:red} </style>
При отведений remove - данный тег style

Все равно выделяется одна , а нужно чтобы при наведении на одну ссылку выделялись две или три другие

Цитата:

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

Все равно выделяется одна

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<div id="MyOpyt">
<style id=Hover>
#MyOpyt a{
color:blue;
}
#MyOpyt a.classImxO{
color:red;
}
</style>
<a href="http://javascript.ru/forum/dom-window/#post177582">XXX</a><br />
fsdfsdf
<a href="http://javascript.ru/forum/dom-window/#post177582">XXX</a><br />
<a href="http://javascript.ru/forum/dom-window/#post177582">XXX</a><br />
asdasd
<a href="http://javascript.ru/forum/dom-window/#post177582">XXX</a><br />
safsdf
<a href="http://javascript.ru/forum/dom-window/#post177582">XXX</a><br />
asdasd
<a href="http://javascript.ru/forum/dom-window/#post177582">XXX</a><br />
das
<a href="http://javascript.ru/forum/dom-window/#post177582">XXX</a><br />
<a href="http://javascript.ru/forum/dom-window/#post177582">XXX</a><br />
</div>
<script>

   $("#MyOpyt a").mouseover(function(){//alert("A")
       $("#MyOpyt a").addClass("classImxO")
    }).mouseout(function(){
       $("#MyOpyt a").removeClass("classImxO")
    });
$(document).ready(function(){});
</script>