Смена картинки при наведении в меню

@GkDaniel · Регистрация: 05.11.2012

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

Здравствуйте, подскажите пожалуйста, как бы сделать так, чтобы в этом меню, при наведении на один из элементов li, менялась картинка?

http://rosmova.com/demo/

У меня получилось изменить её у первого элемента, он по названием "SIECHERE" в меню. Я сделал это с помощью:

HTML5
1
 <img onMouseOver="this.src='1a.png';" onMouseOut="this.src='1.png';" src="1.png"  width="150" height="35" alt="X"/>

Но в этом случае он меняется только тогда, когда курсор находится на элементе, но при наведении на открывающий список он меняется на предыдущую.

Внизу приложил скрин того, как должно быть.

Заранее спасибо.

@aj17 · 20.01.2016, 16:13

Сделайте через background а не img

@AsakuraKazumi · 20.01.2016, 16:13

Нужно применить это к родительскому li, тогда получится

@Анар · 20.01.2016, 16:14

GkDaniel, переверстайте меню, поменяйте img на background-image, используйте :hover, а потом возвращайтесь, доделаем ваше меню.

@AsakuraKazumi · 20.01.2016, 16:15

А лучше да, с помощью css.
li > a { background: ...; }
li:hover > a { background: ...; }

@GkDaniel · 20.01.2016, 16:19 **[ТС]**

Спасибо большое за то, что отозвались, сейчас попробую ваши рекомендации =)

Новые блоги и статьи Все статьи Все блоги /
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .

Смена картинки при наведении в меню

Решение

Решение

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	20.01.2016, 16:13
	Сделайте через background а не img 1

@AsakuraKazumi 23 / 23 / 9 Регистрация: 09.07.2014 Сообщений: 95
	20.01.2016, 16:13
	Нужно применить это к родительскому `li`, тогда получится 1

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	20.01.2016, 16:14
	Сообщение было отмечено GkDaniel как решение Решение GkDaniel, переверстайте меню, поменяйте img на background-image, используйте :hover, а потом возвращайтесь, доделаем ваше меню. 1

@AsakuraKazumi 23 / 23 / 9 Регистрация: 09.07.2014 Сообщений: 95
	20.01.2016, 16:15
	Сообщение было отмечено GkDaniel как решение Решение А лучше да, с помощью css. li > a { background: ...; } li:hover > a { background: ...; } 1

@GkDaniel 17 / 0 / 0 Регистрация: 05.11.2012 Сообщений: 40
	20.01.2016, 16:19 [ТС]
	Спасибо большое за то, что отозвались, сейчас попробую ваши рекомендации =) 0