☰

导航栏中的活动背景不起作用

tag-icon • tag-icon html css
导航栏中的活动背景不起作用

我有一个导航栏，当我将鼠标悬停在所选内容上时，它会以我想要的方式突出显示（白色）。如果用户激活突出显示的页面，我想将单词的背景更改为保持白色，直到选择另一个页面（如下所示）。但是，它仅在悬停时保持白色，而不是在活动时保持白色。

下面是我的共享 CSS，适用于悬停但不适用于活动页面：

 .topmenu a:hover {
    color:#000;
    background-color: #fff;
 }

 .topmenu a:active {
    color:#fff;
    background-color: #f00;
 }

` 这是我的导航栏：

<div class="topmenu">
    <li><a href="home.html">RICHARD COUTTS</a></li>
    <li><a href="architecture.html">architecture</a></li>
    <li><a href="ee.html">engineering</a></li>
    <li><a href="software.html">software</a></li>
    <li><a href="theory.html">theory</a></li>
    <li><a href="contact.html">contact</a></li>
</div>

在此处输入图片描述

答案1

我尝试运行您的代码，并对 active 和 hover 类进行了一些更改。您没有编写 ul 元素，它是 li 元素的父元素。因此我添加了 ul 并更改了 ul 元素的背景颜色，这样当鼠标悬停时，就可以显示白色背景颜色。

CSS：

 
       乌尔      
        {    
            背景颜色：橄榄色；
        }

        li a:悬停：不（.active）{
            颜色：#000；
            背景颜色：#fff；
        }
        。积极的 {
            颜色：#fff；
            背景颜色：#f00；
        }

HTML：

<div class="topmenu">
        <ul>
            <li><a class="active" href="home.html">RICHARD COUTTS</a></li>
            <li><a href="architecture.html">architecture</a></li>
            <li><a href="ee.html">engineering</a></li>
            <li><a href="software.html">software</a></li>
            <li><a href="theory.html">theory</a></li>
            <li><a href="contact.html">contact</a></li>
        </ul>
</div>

相关内容