Как применить свойство hover к элементу списка, когда элемент - ссылка

@antlantis · Регистрация: 07.08.2015

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

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

Код такой:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
 
<a class='a-class'>
    <li class='li-class'>
         <img/>
         <p>.....</p>
    </li>
</a>
 
<a>
    <li>
         <img/>
         <p>.....</p>
    </li>
</a>
 
</ul>

То есть каждый элемент списка нужно сделать ссылкой.

А в каждом элементе внутри и картинки, и текст.

Понимаю, что нельзя оборачивать весь элемент ли в теги ссылки <a></a>

Подскажите пожалуйста, как сделать правильно?
как прописать свойства, чтобы при наведении применить свойства либо к li class="li-class" либо к a class="a-class"?

Пробовал - к сожалению не получил нужного результата

CSS
1
2
li.li-class : hover{...}
a.a-class : hover{...}

Цель - применить свойства - изменить фон и рамку всего блока li

Спасибо большое!

@Fedor92 · 05.01.2018, 15:08

CSS
1
a.a-class:hover{...}

Пробелы убираем лишние...

@andyyy · 05.01.2018, 15:08

Не по теме:

ниче не понял:D

может так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
 
a:hover li {background: red;}
li {background: green;}
 
</style>
<!-- END CSS -->
 
<body>
 
<ul>
 
<a href='#'><li>sadasd</li></a>
 
</ul>
    </body>

@Fedor92 · 05.01.2018, 15:21

antlantis, чуть не забыл...

Тег а нельзя использовать так как он не является дочерним для тега ul... Так что

HTML5
1
2
3
4
5
6
7
8
9
перестраиваем:
<ul>
    <li class='li-class'>
      <a class='a-class'>
         <img/>
         <p>.....</p>
      </a>
    </li>
</ul>

@antlantis · 05.01.2018, 16:08 **[ТС]**

Попробовал оба варианта - пока не получается результат)

Выделяется как ссылка только часть текста - вот пример

стили ставлю эти:

CSS
1
a.a-class:hover{border: 1px solid #44679B;background-color:#C1DAFF;}

а точный код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<li>
    <a  class="a-class" href="">
        <img />
        <span>текст</span>
        <div class="text">
            <p>текст1</p>
            <p>текст2</p>
            <p>текст3</p>
            <p>текст4</p>
            <p>текст5</p>
        </div>
 
    </a>
</li>

вот скрины, что до наведения и что получается при наведении ....

а хотелось бы чтобы весь блок менял фон и рамку

@antlantis · 05.01.2018, 16:11 **[ТС]**

То есть при наведении выделяется только заголовок "3-к. кв. на ул. Планерная"

@antlantis · 05.01.2018, 16:36 **[ТС]**

Обернул все содержимое в тегах "а" в блок div
задал ему класс "div-class"
и пытаюсь задать этому div - стиль - не применяется стиль вообще ни к чему

вот код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<li>
  <div class="div-class">
    <a  class="a-class" href="">
        <img />
        <span>текст</span>
        <div class="text">
            <p>текст1</p>
            <p>текст2</p>
            <p>текст3</p>
            <p>текст4</p>
            <p>текст5</p>
        </div>
 
    </a>
  </div>
</li>

вот css

CSS
1
a.a-class:hover div.div-class{border: 1px solid #44679B;background-color:#C1DAFF;}

Этот вариант не срабатывает совсем - ничего не выделяется

А вот если убрать указание класса у оберточного div, то срабатывает. но для вложенного div class="text"

вот код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<li>
  <div>
    <a  class="a-class" href="">
        <img />
        <span>текст</span>
        <div class="text">
            <p>текст1</p>
            <p>текст2</p>
            <p>текст3</p>
            <p>текст4</p>
            <p>текст5</p>
        </div>
 
    </a>
  </div>
</li>

вот css

CSS
1
a.a-class:hover div{border: 1px solid #44679B;background-color:#C1DAFF;}

вот скрин что получается при этом

@andyyy · 05.01.2018, 17:42

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<STYLE>
 
.a-class:hover{background-color:#C1DAFF;}
LI:HOVER {BACKGROUND: RED;}
LI:HOVER P {BACKGROUND: GREEN;}
LI P A:HOVER {BACKGROUND: BLUE;}
LI P:HOVER {BACKGROUND: grey;}
</STYLE>
 
<li>
    <a  class="a-class" href="">
        <img />
        <span>текст</span>
        <div class="text">
            <p>текст1</p>
            <p>текст2</p>
            <p>текст3</p>
            <p>текст4</p>
            <p><a href='#'>текст5</a></p>
        </div>
 
    </a>
</li>

вот вам разные варианты))

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

HTML5
1
li div:hover {BACKGROUND: yellow;}

@antlantis · 06.01.2018, 21:08 **[ТС]**

andyyy, спасибо огромное!!! работает!!
Дай Вам Бог здоровья!!!

@andyyy · 06.01.2018, 21:22

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

andyyy, спасибо огромное!!! работает!!

а какой правильный был))?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	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 была полностью переписана на Си, в. . .

@antlantis 4 / 4 / 0 Регистрация: 07.08.2015 Сообщений: 102
	05.01.2018, 16:11 [ТС]
	То есть при наведении выделяется только заголовок "3-к. кв. на ул. Планерная" 0

@antlantis 4 / 4 / 0 Регистрация: 07.08.2015 Сообщений: 102
	06.01.2018, 21:08 [ТС]
	andyyy, спасибо огромное!!! работает!! Дай Вам Бог здоровья!!! 0

Как применить свойство hover к элементу списка, когда элемент - ссылка

Решение