为什么CSS：hover无法正常工作？

时间：2019-04-07 21:16:55

标签： javascript html css

我有一个导航菜单，当您将鼠标悬停在菜单中的链接/元素之一上时，该菜单会更改颜色。每个链接/列表项在您单击时都会运行一个javascript函数，该函数将隐藏som内容，而其他一些内容将显示在页面上。同时，您正在访问的页面/链接的背景颜色也会改变。它可以正常工作，但是问题是，一旦单击了链接之一，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>

1 个答案:

答案 0 :(得分：2)

这是specificity的问题。

使用:hover时，鼠标悬停在元素上时将应用样式。但是新样式只是纯CSS即可应用，它不会替代当前样式。

在这种情况下，您可以在以下选择器中使用悬停样式：

ul.nav li

它们是 2 标记名选择器+ 1 类选择器，其区分性为0 1 2

但是背景颜色由以下选择器指定：

#page1_link

这只是一个ID，其特异性为1 0 0，较高。

因此，即使两种样式同时应用于 hover ，第二种样式还是“获胜”，您看不到效果。

要解决此问题，您需要为元素赋予更高的特异性，或者（不建议）使用!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>

相关问题
最新问题