Как сделать, чтоб при наведении на ссылку, другие с этим 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 чтобы можно было обратится к родителю элемента.Чем они там занимаются не понятно

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

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