Как сделать, чтоб при наведении на ссылку, другие с этим id тоже подсвечивались?

@SanekPlus · Регистрация: 06.02.2013

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

Сейчас для ссылок стоит обычный CSS: при наведении ссылка меняет цвет и подчеркивается. Подскажите как сделать, чтоб тоже происходило и с остальными ссылками из одной ID группы? То есть подводим к одной, но другие тоже подчеркиваются. Можно и без css, если так проще.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
a:link {
    font-family:Verdana;
    color:#0000FF;
    text-decoration: none
}
a:visited {
    font-family:Verdana;
    color:#0000FF;
}
a:hover {
    font-family:Verdana;
    color:#ff8a00;
    text-decoration: underline
}
</style>

HTML5
1
2
3
4
5
<a id=1 href=http://ya.ru>link #1</a>
<a id=1 href=http://ya.ru>link #2</a>
 
<a id=2 href=http://ya.ru>link #3</a>
<a id=2 href=http://ya.ru>link #4</a>

NEbO · 06.03.2013, 02:24

ид должен быть уникальный, у одного элемента на всю страницу. если у вас несколько элементов с одинаковым ид, значит это класс, а не ид.
примерная аналогия: ид -- это как номер паспорта. а "классов" у одного человека может быть куча: высокий/низкий, брюнет/блондин, программер/маляр/киллер, зеленоглазый/красноглазый/голубоглазый/черноглазый и так далее.
тогда можно обратиться по названию класса, типа как a.myclass:hover, a.myclass:visited, или как вам там надо

@SanekPlus · 06.03.2013, 12:02 **[ТС]**

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

тогда можно обратиться по названию класса, типа как a.myclass:hover, a.myclass:visited, или как вам там надо

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
a.m1:link {
    font-family:Verdana;
    color:#0000FF;
    text-decoration: none
}
a.m1:visited {
    font-family:Verdana;
    color:#0000FF;
}
a.m1:hover {
    font-family:Verdana;
    color:#ff8a00;
    text-decoration: underline
}
</style>

Вот так тобишь?

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

ид должен быть уникальный, у одного элемента на всю страницу.

HTML5
1
2
3
4
5
<a id="x1-1" class="m1" href=http://ya.ru>link #1</a>
<a id="x1-2" class="m1" href=http://ya.ru>link #2</a>
 
<a id="x2-1" class="m1" href=http://ya.ru>link #3</a>
<a id="x2-2" class="m1" href=http://ya.ru>link #4</a>

Вот сделал уникальный айди, но позволяющий определить группу ссылок.

Кто-нить дайте решение, как применять css ко всей группе ссылок одновременно, при наведении курсора только на одну ссылку из группы?

@newJS · 06.03.2013, 12:17

HTML5
1
2
3
4
5
6
7
8
9
<div class="multi">
<a id="x1-1" class="m1" href=http://ya.ru>link #1</a><br>
<a id="x1-2" class="m1" href=http://ya.ru>link #2</a>
</div>
 
<div class="multi">
<a id="x2-1" class="m1" href=http://ya.ru>link #3</a><br>
<a id="x2-2" class="m1" href=http://ya.ru>link #4</a>
</div>

CSS
1
.multi:hover a {color:lime;}

@SanekPlus · 06.03.2013, 14:04 **[ТС]**

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

HTML5
1
2
3
4
5
6
7
8
9
<div class="multi">
<a id="x1-1" href=http://ya.ru>link #1</a><br>
<a id="x1-2" href=http://ya.ru>link #2</a>
</div>
 
<div class="multi">
<a id="x2-1" href=http://ya.ru>link #3</a><br>
<a id="x2-2" href=http://ya.ru>link #4</a>
</div>

CSS
1
.multi:hover a {color:lime;}

К сожалению нет возможности заключить ссылки в 1 контейнер, т.к. они разбросаны по все странице.
Может есть какая-то возможно подсвечивать по группе в id ?

p.s. Почему-то в таком контейнере ссылки подсвечиваются не только при наведении на них, но и при наведении на строку где они расположены.

NEbO · 06.03.2013, 14:21

вы добавили класс m1, если не ошибаюсь. что же мешает теперь прописать:

CSS
1
a.m1:hover {color:lime;}

или что вам там нужно

Добавлено через 2 минуты
а, вам нужно по группам. ну ок. тогда так:

HTML5
1
2
<a class="m1 group1" href=http://ya.ru>link #3</a>
<a class="m1 group2" href=http://ya.ru>link #3</a>

и

CSS
1
2
a.m1.group1:hover {color:lime;}
a.m1.group2:hover {color:blue;}

@newJS · 06.03.2013, 15:28

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

p.s. Почему-то в таком контейнере ссылки подсвечиваются не только при наведении на них, но и при наведении на строку где они расположены.

Потому что див это блочный элемент, он по умолчанию занимает всю ширину.

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

Может есть какая-то возможно подсвечивать по группе в id ?

Наверно скриптом придется.

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

т.к. они разбросаны по все странице.

А будут ли они видны?, может все эти мучения зря.

NEbO, не работает, вроде как ховер может только в своем контейнере другой элемент поиметь, да и то ниже уровнем вложенности.

NEbO · 06.03.2013, 15:42

если нужно подсветить несколько ссылок одним, другой -- другим, то все будет работать. зачем нужны контейнеры я вообще не понял, если честно, когда все можно разбить по классам. они для этого и придуманы, чтобы группировать элементы.

Добавлено через 2 минуты
толи я вообще не понимаю, кто чего тут хочет добиться

Добавлено через 2 минуты

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

.multi:hover a {color:lime;}

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

Потому что див это блочный элемент

хде тута див? подсвечиваются сами a-элементы... толи я устал и жутко туплю, толи ТС не знает, чего хочет. я никак не могу понять

Добавлено через 3 минуты
ой, понял, ага. .multi:hover a.
SanekPlus, попробуйте сменить этот селектор на .multi a:hover . если это то, что вы хотите, тогда можно попробовать сгруппировать, как я написал выше. если я что-то не так понял, прошу меня простить, вероятно я реально устал уже

@newJS · 06.03.2013, 20:42

Как я понял ему нужно при наезде на одну ссылку подсветить несколько относящихся к какой то группе.
Что я и сделал засунув в контейнер группу ссылок, но его это не устроило, говорит ссылки раскиданы, контейнер не годится. Тогда скриптом.
это по быстрому, в лоб

HTML5
1
2
3
4
5
6
7
8
<a id="x1-18" class="m1" href=http://ya.ru>link #1</a><br>
<a id="x1-27" class="m3" href=http://ya.ru>link #2</a><br>
<a id="x2-16" class="m2" href=http://ya.ru>link #3</a><br>
<a id="x2-25" class="m1" href=http://ya.ru>link #4</a><br>
<a id="x1-14" class="m3" href=http://ya.ru>link #1</a><br>
<a id="x1-23" class="m1" href=http://ya.ru>link #2</a><br>
<a id="x2-12" class="m2" href=http://ya.ru>link #3</a><br>
<a id="x2-21" class="m3" href=http://ya.ru>link #4</a>

JavaScript
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
onload=function(){
var m, k;
m=document.getElementsByTagName("a");
k=m.length;
while(k--){
if(m[k].className.search(/m[0-9]/)==0){
m[k].onmouseover=over;
m[k].onmouseout=out;}
};
 
 };
 
function over(){
var m, k, s;
m=document.getElementsByTagName("a");
s=this.className;
k=m.length;
while(k--){if(s==m[k].className){m[k].className=s+' mmm';}};
 
 };
 
function out(){
var m, k, s;
m=document.getElementsByTagName("a");
s=this.className;
k=m.length;
while(k--){if(s==m[k].className){m[k].className=s.replace(/^(.*?) /, "$1");}};
 };

@koza4ok · 06.03.2013, 23:45

Блин когда уже сделают родительский псевдоклас в CSS чтобы можно было обратится к родителю элемента.Чем они там занимаются не понятно

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

NEbO 601 / 468 / 73 Регистрация: 22.01.2009 Сообщений: 1,180 Записей в блоге: 1
	06.03.2013, 02:24
	ид должен быть уникальный, у одного элемента на всю страницу. если у вас несколько элементов с одинаковым ид, значит это класс, а не ид. примерная аналогия: ид -- это как номер паспорта. а "классов" у одного человека может быть куча: высокий/низкий, брюнет/блондин, программер/маляр/киллер, зеленоглазый/красноглазый/голубоглазый/черноглазый и так далее. тогда можно обратиться по названию класса, типа как a.myclass:hover, a.myclass:visited, или как вам там надо 1

@koza4ok 632 / 440 / 67 Регистрация: 19.09.2012 Сообщений: 1,632
	06.03.2013, 23:45
	Блин когда уже сделают родительский псевдоклас в CSS чтобы можно было обратится к родителю элемента.Чем они там занимаются не понятно 0