Как сделать плавающий фон в меню при наведении без JS. То есть фон перемещается за мышкой при наведении на ссылку?

Question

kroha3000 @kroha3000

HTML

Как сделать плавающий фон в меню при наведении без JS. То есть фон перемещается за мышкой при наведении на ссылку?

Как сделать плавающий фон в меню при наведении без JS. То есть фон перемещается за мышкой при наведении на ссылку?

Мышка фон-подкладка следует за мышкой при ховере на ссылки в меню.

Вопрос задан более трёх лет назад
148 просмотров

Комментировать

Подписаться 1 Средний Комментировать

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик: тариф PRO

10 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

Пригласить эксперта

Ответы на вопрос 1

11 комментариев

kroha3000 @kroha3000 Автор вопроса

а если подробнее*?

Написано более трёх лет назад
Issue @paulenot

kroha3000,
Css transform может двигать объекты.

Написано более трёх лет назад
kroha3000 @kroha3000 Автор вопроса

Issue, да я не спорю. но только дочерние элементы можно ховерить.

Родительский или параллельные элементы ховорить нельзя. ну или по крайне мере у меня не получается.

Написано более трёх лет назад
Issue @paulenot

kroha3000, Такое нужно?

Написано более трёх лет назад
kroha3000 @kroha3000 Автор вопроса

ага, спасибо. это без JS?

Написано более трёх лет назад
Issue @paulenot

kroha3000, Вот еще один пример. Вот тут их много.

Написано более трёх лет назад
kroha3000 @kroha3000 Автор вопроса

Issue, отличный пример то что нужно, только как управлять активным элементом? То есть сейчас всегда стоит на Home, только через псевдоклассы?

Написано более трёх лет назад
kroha3000 @kroha3000 Автор вопроса

Issue, например если мы находимся на странице About. То есть подсветка стартовая на About.

Написано более трёх лет назад

Issue @paulenot

kroha3000,

<?php
    $url = $_SERVER['REQUEST_URI']; //получаем урл и записываем в переменную
?>

<!DOCTYPE html>
<html>
    <head>
        <style>
        [href="<?=$url?>"]{color: red;} //Добавляем стили для всех обьектов href+наш урл
        .navigator{background:green;}
        </style>
    </head>
    <body>
        <a class="navigator">URL: <?=$url?></a>

        <ul class="menu">
            <li><a href="/home">home</a></li>
            <li><a href="/forum">forum</a></li>
            <li><a href="/contact">contact</a></li>
        </ul>
    <body>
</html>

Написано более трёх лет назад

kroha3000 @kroha3000 Автор вопроса

Issue, я понимаю что должно отслеживаться и тд. добавляться активный класс.

Но ВОТ это меню - что в нём нужно поменять, что бы отсчёт был с About. То есть Изначально активная была About

Написано более трёх лет назад
Issue @paulenot

kroha3000, еще можно использовать вложенность селекторов SCSS

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+2 ещё

Простой
Как блок уведомлений поднять выше dialog?
- 1 подписчик
- 21 мая
- 101 просмотр
2

ответа
HTML

+1 ещё

Простой
Как свг заменить на фон?
- 1 подписчик
- 08 мая
- 243 просмотра
1

ответ
HTML

+1 ещё

Простой
Чем препроцессить в HTML сокращения?
- 2 подписчика
- 04 мая
- 319 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 2 подписчика
- 01 мая
- 356 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Как обновлять данные массива, чтобы по нажатию на кнопку на странице добавлялся еще один элемент массива?
- 3 подписчика
- 12 апр.
- 745 просмотров
4

ответа
JavaScript

+1 ещё

Простой
Почему не работает код из js файла?
- 3 подписчика
- 12 апр.
- 703 просмотра
4

ответа
HTML

+1 ещё

Простой
Беда с input. Как избавиться от выделения заполненного поля?
- 2 подписчика
- 31 мар.
- 362 просмотра
1

ответ
HTML

Простой
Как сделать так, чтобы в браузерах код html не показывался в квадратиках?
- 4 подписчика
- 26 мар.
- 688 просмотров
3

ответа
HTML

Простой
Как сделать деплой проекта, статического сайта сделанного на чистом html у которого нет баз данных?
- 1 подписчик
- 26 мар.
- 262 просмотра
3

ответа
HTML

+1 ещё

Простой
Как менять тему письма при рассылке на почту в зависимости от темы устройства?
- 2 подписчика
- 25 мар.
- 266 просмотров
1

ответ
Показать ещё Загружается…

Answer 1 · 2020-03-28 13:13:11

Аморти Константин @Nikneim-30

Советую сделать через , поместить туда ссылку и сделать соответствующие классы или стили в css/

Ответ написан более трёх лет назад

11 комментариев

Как сделать плавающий фон в меню при наведении без JS. То есть фон перемещается за мышкой при наведении на ссылку?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт