Активная ссылка

@Cyber_C++ · Регистрация: 21.09.2011

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

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

CSS
1
2
.rollover-left { background: url(images/left.png); display: block; width: 311px; height: 77px; }
.rollover-left:hover, rollover-left:active { background: url(images/left-active.png); }

HTML5
1
2
3
<ul class="menu">
                <li><a href="" class="rollover-left"></a></li> 
</ul>

@Heleg · 02.04.2012, 11:09

пропустил точку rollover-left:active

@Cyber_C++ · 02.04.2012, 16:25 **[ТС]**

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

пропустил точку rollover-left:active

Да как бы, дело не в точке это я просто на скорую руку добавил и ошибся, с ней все равно не работает активная ссылка, дело не в ней

@Heleg · 02.04.2012, 16:31

ок, ща попробую разобраться

Добавлено через 3 минуты
у меня всё работает

@Cyber_C++ · 02.04.2012, 16:34 **[ТС]**

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

ок, ща попробую разобраться

Добавлено через 3 минуты
у меня всё работает

странно, почему же у меня не работает

@Heleg · 02.04.2012, 16:51

какой браузер?

Добавлено через 34 секунды
смотри за опечатками

@Cyber_C++ · 02.04.2012, 16:58 **[ТС]**

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

какой браузер?

Добавлено через 34 секунды
смотри за опечатками

Хром, да вроде тут и опечатываться негде

@Heidel · 02.04.2012, 22:54

Всё работает в Фаерфоксе, Опере, ИЕ и Хроме.

@Cyber_C++ · 02.04.2012, 23:16 **[ТС]**

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

Всё работает в Фаерфоксе, Опере, ИЕ и Хроме.

Да чтож то такое, а не могли бы пример своего кода тогда выложить? Не пойму в чем дело..

Добавлено через 31 секунду
Heidel, а какой вы редактор используете если не секрет?

@Heidel · 02.04.2012, 23:30

Сообщение от Cyber_C++

Heidel, а какой вы редактор используете если не секрет?

Notepad++

Я ничего не меняла в твоем коде.
Только посоветовала бы немного изменить:

CSS
1
.rollover-left:link { background: url(images/left.png); display: block; width: 311px; height: 77px; }

Я бы посоветовала проверить названия самих png-файлов, совпадают они с теми, что написаны в коде.

@Cyber_C++ · 03.04.2012, 00:57 **[ТС]**

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

Notepad++

Я ничего не меняла в твоем коде.
Только посоветовала бы немного изменить:

CSS
1
.rollover-left:link { background: url(images/left.png); display: block; width: 311px; height: 77px; }

Я бы посоветовала проверить названия самих png-файлов, совпадают они с теми, что написаны в коде.

добавил линк, и кнопка перестала отображаться, да названия верны потому как ховер работает картинка меняется при наведении, а после клика на нее не остается измененной, остается исходной что была в .rollover-left, а мне нужна та что .rollover-left:active

Добавлено через 1 минуту
Странно при зажатой кнопке картинка меняется а как только отпускаю она становится на место

Добавлено через 5 минут
По всей видимости это не тот псевдо класс, она в момент нажатия меняет фон, а мне нужно чтоб после того как она будет нажата она стала другим фоном, существует ли так класс?

@Heidel · 03.04.2012, 09:15

Пседокласс :active делает ссылку активной только в момент клика на нее мышкой.

@Heleg · 03.04.2012, 09:16

Сообщение от Cyber_C++

Странно при зажатой кнопке картинка меняется

лол! на мой взгляд ничего странного. для ссылок после посещения есть псевдокласс :visited

@Cyber_C++ · 03.04.2012, 13:45 **[ТС]**

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

лол! на мой взгляд ничего странного. для ссылок после посещения есть псевдокласс :visited

Этот я тоже пробовал и она не оставалась подсвеченной

@Heleg · 03.04.2012, 13:50

в псевдоклассах для ссылок важен порядок

CSS
1
2
3
4
a:link {}
a:visited {}
a:hover {}
a:active {}

@Cyber_C++ · 03.04.2012, 14:08 **[ТС]**

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

в псевдоклассах для ссылок важен порядок

CSS
1
2
3
4
a:link {}
a:visited {}
a:hover {}
a:active {}

То есть выходит должно быть так?

CSS
1
2
.rollover-left:link { background: url(images/left.png); display: block; width: 311px; height: 77px; }
.rollover-left:visited, .rollover-left:hover, .rollover-left:active { background: url(images/left-active.png); }

Не поверите но все равно после нажатия она не подсвечивается

@Heleg · 03.04.2012, 14:21

ок. то есть есть сначала одна картинка, потом при наведении на неё меняется изображение, а после посещения опять возвращается первоначальная? а в каких браузерах проходили тесты?

@Cyber_C++ · 03.04.2012, 14:34 **[ТС]**

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

ок. то есть есть сначала одна картинка, потом при наведении на неё меняется изображение, а после посещения опять возвращается первоначальная? а в каких браузерах проходили тесты?

Да именно так, смотрю в хроме

Добавлено через 1 минуту
Вот еще может в хтмл должна ссылка вести куда-то а не просто пустая? или это не обязательно?

Добавлено через 2 минуты
Ага, а вот в ИЕ работает!

Добавлено через 1 минуту
Но после нажатия остается ободок от картинки, как его убрать? текст-декорейшн?

@Heleg · 03.04.2012, 16:23

Сообщение от Cyber_C++

Вот еще может в хтмл должна ссылка вести куда-то а не просто пустая? или это не обязательно?

это же не сложно проверить опытным путём

@Cyber_C++ · 04.04.2012, 13:48 **[ТС]**

Так что как сделать чтоб в хроме работало тоже? кто знает?

Новые блоги и статьи Все статьи Все блоги /
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(), которая. . .

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	02.04.2012, 11:09
	пропустил точку rollover-left:active 1

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	02.04.2012, 16:31
	ок, ща попробую разобраться Добавлено через 3 минуты у меня всё работает 1

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	02.04.2012, 16:51
	какой браузер? Добавлено через 34 секунды смотри за опечатками 1

@Heidel 115 / 115 / 39 Регистрация: 11.10.2011 Сообщений: 649
	02.04.2012, 22:54
	Всё работает в Фаерфоксе, Опере, ИЕ и Хроме. 1

@Heidel 115 / 115 / 39 Регистрация: 11.10.2011 Сообщений: 649
	03.04.2012, 09:15
	Пседокласс :active делает ссылку активной только в момент клика на нее мышкой. 1

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	03.04.2012, 14:21
	ок. то есть есть сначала одна картинка, потом при наведении на неё меняется изображение, а после посещения опять возвращается первоначальная? а в каких браузерах проходили тесты? 1

@Cyber_C++ 0 / 0 / 0 Регистрация: 21.09.2011 Сообщений: 52
	04.04.2012, 13:48 [ТС]
	Так что как сделать чтоб в хроме работало тоже? кто знает? 0