Форум

warobushek · #1 (**permalink**) 08.11.2009, 11:00

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

Gozar · #2 (**permalink**) 08.11.2009, 14:48

если Вы имеете в виду меняла цвет, то это делается с помощью стилей и 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>

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

warobushek · #3 (**permalink**) 08.11.2009, 19:09

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

Gozar · #4 (**permalink**) 08.11.2009, 19:25

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

warobushek · #5 (**permalink**) 08.11.2009, 21:52

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

Код:

<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 и т.п.

Gozar · #6 (**permalink**) 09.11.2009, 09:48

можно, нужно изменять класс 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 · #7 (**permalink**) 28.05.2012, 15:22

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

Deff · #8 (**permalink**) 28.05.2012, 19:07

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

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

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

pikas · #9 (**permalink**) 30.05.2012, 18:58

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

Deff · #10 (**permalink**) 30.05.2012, 19:40

Сообщение от 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>

Форум

Справочник

Discord чат

Курсы javascript