Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: 6312
Последний выпуск: 19.06.2015

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

24K
08 ноября 2009 года
warobushek
32 / / 10.08.2008
Возможно как-нибудь сделать так, чтобы одна ссылка выделялась,
когда пользователь наводит мышку на другую ссылку?
13
08 ноября 2009 года
RussianSpy
3.0K / / 04.07.2006
Ну можно например так:
Код:
<a href="http://yandex.ru" id="a1" &#111;&#110;mouseover="hl('a2')" &#111;&#110;mouseout="unhl('a2')">Ссылка 1</a>
<a href="http://google.com" id="a2" &#111;&#110;mouseover="hl('a1')" &#111;&#110;mouseout="unhl('a1')">Ссылка 2</a>
<script type="text/javascript">
function hl(n)
{
  document.getElementById(n).style.textDecoration = 'underline';
}
function unhl(o)
{
  document.getElementById(n).style.textDecoration = 'none';
}
</script>
24K
08 ноября 2009 года
warobushek
32 / / 10.08.2008
Конечно, можно использовать и свойство style, но как использовать уже существующие стили для ссылки, заданные через атрибут class??
13
08 ноября 2009 года
RussianSpy
3.0K / / 04.07.2006
Задавать стиль через свойство "className"
24K
08 ноября 2009 года
warobushek
32 / / 10.08.2008
Работает, если сделать вот таким образом
Код:
<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="#" &#111;&#110;mouseover="test_over('twod');" &#111;&#110;mouseout="test_out('twod');" id="ONE1">ссылка 1</a>
</div>

<div class="test" id="twod">
<a href="#" &#111;&#110;mouseover="test_over('oned');" &#111;&#110;mouseout="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 и т.п.
13
08 ноября 2009 года
RussianSpy
3.0K / / 04.07.2006
сделать классы и задавать их непосредственно ссылкам. Еще как вариант можно вызывать события программно.
24K
09 ноября 2009 года
warobushek
32 / / 10.08.2008
Точно !))
А может можно еще проще?
Например программно вызвать событие onmouseover?
13
09 ноября 2009 года
RussianSpy
3.0K / / 04.07.2006
Проще точно не будет - программный вызов события штука объемная. Сейчас к сожалению полностью воспроизвести способ не смогу. Копайте в сторону document.createEvent() и DOM2 Events.

Вот некоторые ссылки - хотя информации там не очень много
http://www.sql.ru/forum/actualthread.aspx?tid=584919
http://wdh.suncloud.ru/dhtml02.htm#mcreateevent
http://www.howtocreate.co.uk/tutorials/javascript/domevents
93K
17 апреля 2014 года
rootrol
1 / / 17.04.2014
 
Код:
<div onmouseover="decortext.style.textDecoration='underline'" onmouseout="decortext.style.textDecoration='none'"> текст для наведения мыши </div>
<div id='decortext'> текст для подчёркивания при наведении на "текст для наведения мыши" </div>
Чем проще тем лучше и не надо наворачивать лишнего текста.
8
17 апреля 2014 года
mfender
3.5K / / 15.06.2005
Трупов подымают опять, mike. Это беда.

Знаете кого-то, кто может ответить? Поделитесь с ним ссылкой.

Ваш ответ

Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог