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

Question

kroha3000 @kroha3000

HTML

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

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

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

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

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

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

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

Ответы на вопрос 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

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