Почему CSS: hover не работает должным образом?

У меня есть меню навигации, которое меняет цвет, когда вы наводите указатель мыши на одну из ссылок/элементов в меню. Каждая ссылка / элемент списка запускает функцию javascript, когда вы нажимаете на нее, что скрывает некоторое содержимое, а некоторое другое содержимое будет отображаться на странице. При этом цвет фона страницы/ссылки, которую вы посещаете, меняется. Он работает как надо, но проблема в том, что после того, как вы нажали на одну из ссылок, код css ul.nav li:hover больше не работает.

Вот мой код:

    function show_page1() {
        let page1 = document.querySelector("#page1");
        let page2 = document.querySelector("#page2");
        let page1_Link = document.querySelector("#page1_link");
        let page2_Link = document.querySelector("#page2_link");

        page2.style = "display: none";
        page1.style = "display: block";

        page1_Link.style = "background-color: #008CBA";
        page2_Link.style = "background-color: #f3f3f3";
    }

    function show_page2() {
        let page1 = document.querySelector("#page1");
        let page2 = document.querySelector("#page2");
        let page1_Link = document.querySelector("#page1_link");
        let page2_Link = document.querySelector("#page2_link");

        page2.style = "display: block";
        page1.style = "display: none";

        page1_Link.style = "background-color: #f3f3f3";
        page2_Link.style = "background-color: #008CBA";
    }

       ul.nav {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f3f3f3;;
            line-height: 1.5;
        }

        ul.nav li {
            float: left;
            display: inline-block;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        ul.nav li:hover {
            background-color: lightgrey;
            cursor: pointer;
        }

        #page1_link {
            background-color: #008CBA;
        }

        #page2 {
            display:none;
        }

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
</head>
<body>
    <nav>
        <ul class = "nav">
            <li id = "page1_link" onclick = "show_page1()">page 1</li>
            <li id = "page2_link" onclick = "show_page2()">page 2</li>
        </ul>
    </nav>

    <div id = "page1">
        Page 1
    </div>

    <div id = "page2">
        Page 2
    </div>
</body>
</html>

javascript html css

07.04.2019 23:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

102

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это вопрос специфичность.

Когда вы используете :hover, стиль применяется, когда мышь находится над элементом. Но новый стиль просто применяется, так как это был обычный CSS, он не заменит текущий стиль.

В этом случае у вас есть стиль наведения в следующем селекторе:

ul.nav li

Это селекторы тэгов 2 + селектор класса 1, его секретность 0 1 2

Но цвет фона задается следующим селектором:

#page1_link

Это просто id, его специфичность 1 0 0, что выше.

Таким образом, даже если два стиля применяются вместе к парить, второй «выигрывает», и вы не видите эффекта.

Чтобы решить проблему, вам нужно придать вашему элементу более высокую специфичность или (не рекомендуется) использовать !important.

Я покажу вам оба примера:

Пример с более высокой специфичностью:

function show_page1() {
        let page1 = document.querySelector("#page1");
        let page2 = document.querySelector("#page2");
        let page1_Link = document.querySelector("#page1_link");
        let page2_Link = document.querySelector("#page2_link");

        page2.style = "display: none";
        page1.style = "display: block";

        page1_Link.style = "background-color: #008CBA";
        page2_Link.style = "background-color: #f3f3f3";
    }

    function show_page2() {
        let page1 = document.querySelector("#page1");
        let page2 = document.querySelector("#page2");
        let page1_Link = document.querySelector("#page1_link");
        let page2_Link = document.querySelector("#page2_link");

        page2.style = "display: block";
        page1.style = "display: none";

        page1_Link.style = "background-color: #f3f3f3";
        page2_Link.style = "background-color: #008CBA";
    }

ul.nav {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f3f3f3;;
            line-height: 1.5;
        }

        ul.nav li {
            float: left;
            display: inline-block;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        /* example with higher specificity: id in place of class */
        #page1_link:hover {
            background-color: lightgrey;
            cursor: pointer;
        }

        #page1_link {
            background-color: #008CBA;
        }

        #page2 {
            display:none;
        }

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
</head>
<body>
    <nav>
        <ul class = "nav">
            <li id = "page1_link" onclick = "show_page1()">page 1</li>
            <li id = "page2_link" onclick = "show_page2()">page 2</li>
        </ul>
    </nav>

    <div id = "page1">
        Page 1
    </div>

    <div id = "page2">
        Page 2
    </div>
</body>
</html>

Пример с !important:

function show_page1() {
        let page1 = document.querySelector("#page1");
        let page2 = document.querySelector("#page2");
        let page1_Link = document.querySelector("#page1_link");
        let page2_Link = document.querySelector("#page2_link");

        page2.style = "display: none";
        page1.style = "display: block";

        page1_Link.style = "background-color: #008CBA";
        page2_Link.style = "background-color: #f3f3f3";
    }

    function show_page2() {
        let page1 = document.querySelector("#page1");
        let page2 = document.querySelector("#page2");
        let page1_Link = document.querySelector("#page1_link");
        let page2_Link = document.querySelector("#page2_link");

        page2.style = "display: block";
        page1.style = "display: none";

        page1_Link.style = "background-color: #f3f3f3";
        page2_Link.style = "background-color: #008CBA";
    }

ul.nav {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f3f3f3;;
            line-height: 1.5;
        }

        ul.nav li {
            float: left;
            display: inline-block;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        /* example with !important */
        ul.nav li:hover {
            background-color: lightgrey !important;
            cursor: pointer;
        }

        #page1_link {
            background-color: #008CBA;
        }

        #page2 {
            display:none;
        }

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
</head>
<body>
    <nav>
        <ul class = "nav">
            <li id = "page1_link" onclick = "show_page1()">page 1</li>
            <li id = "page2_link" onclick = "show_page2()">page 2</li>
        </ul>
    </nav>

    <div id = "page1">
        Page 1
    </div>

    <div id = "page2">
        Page 2
    </div>
</body>
</html>

но у меня все еще та же проблема

— 07.04.2019 23:32

Я поместил два рабочих фрагмента, где применяется стиль :hover - даже после клика

— 07.04.2019 23:34

@user3740970 user3740970 Извините, но первый фрагмент на самом деле не работает. Это происходит потому, что вы устанавливаете стиль через свойство style в js, которое эквивалентно <div style = "..."> и имеет самую высокую специфичность, только !important имеет более высокую специфичность. Я советую вам не использовать style.backgroundColor, а просто применять класс через js

— 08.04.2019 09:30

07.04.2019 23:20