Question

使用CSS制作菜单时遇到问题。问题是我想使用：active来突出显示当前按钮。但经过多次尝试，我仍然无法在我的代码中找到如何实现它。

我在<li>标记内使用<a>标记，以确保按钮背景和文字颜色在选中时更改，因为在尝试将<a>标记放在<li>标记之后选择按钮时文本颜色没有改变，文本只有在我将光标放入文本后才会改变。

需要你的帮助。

这是我的CSS代码：

a, body {
    margin-top:-30px;
    text-decoration:none;
}

#topmenu {
    margin-left:170px;
    cursor:pointer;
}

#topmenu li {
    color:white;
    list-style:none;
    float:left;
    margin-right:5px;
    padding:20px 15px 10px 15px;;
    box-shadow:1px 1px 1px grey;
    -webkit-box-shadow:1px 1px 1px grey;
    -moz-box-shadow:1px 1px 1px grey;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    background: -moz-linear-gradient(100% 100% 90deg, #2F2727, #004890);
    background: -webkit-gradient(linear, left top, left bottom, from(#004890), to(#2F2727));
    text-shadow: 1px 1px 1px #555;
}

#topmenu li:hover, #topmenu li:active
{
    background: -moz-linear-gradient(100% 100% 90deg, #FED93A, #FEC13A);
    background: -webkit-gradient(linear, left top, left bottom, from(#FEC13A), to(#FED93A));
    color:black;
    padding-top:30px;
}

#topmenu #home {
    margin-right:10px;
}

#topmenu #logout {
    background:#000;
    color:white;
}

这是我的HTML代码：

<div id="topmenu">
 <ul>
  <img src="includes/menu/pics.gif" alt="" style="float:left;"/>
  <a href="../folder/home.php"><li id="home">Home</li></a>
  <a href="../folder/A.php"><li>A</li></a>
  <a href="../folder/B.php"><li>B</li></a>
  <a href="../folder/C.php"><li>C</li></a>
  <a href="../"><li id="logout">Logout</li></a>
 </ul>
</div>

Answer 1

你错过了点配合。：active伪类不能像这样工作。

:active sitepoint CSS reference

此伪类匹配正在激活的任何元素。例如，它适用于鼠标单击链接的持续时间，从鼠标按钮被按下的点到再次释放它的点。伪类并不表示指向活动页面或当前页面的链接 - 这是CSS初学者中常见的误解

他想要实现的是将样式应用于当前的a与上述“主动伪类”无关。

有很多方法可以实现这一点。

Answer 2

我认为问题在于：主动并不意味着你的想法。

：单击某个元素时，但在您松开鼠标按钮之前，会激活。请参阅CSS spec on dynamic pseudo classes。

以下是一个示例HTML页面，其中：<a>和<h1>元素都处于活动状态，当您单击并按住鼠标按钮时，您会看到文本颜色变为蓝色。

<html>
  <head>
    <style type="text/css">
      a, h1 { color: red; }
      a:active, h1:active { color: blue; }
    </style>
  </head>
  <body>
    <h1>headline</h1>
    <a href="#">link</a>
  </body>
</html>

Answer 3

我相当确定:active仅触发链接（A标记）。它不会（也不应该）处理像LI这样的任意元素。

我认为你可能有办法解决这个问题。您是否尝试在LI上保留结构属性（浮点数，边距等），但将可视属性（边框，填充，颜色等）移动到As ？这样，您可以设置#topmenu li a:hover，#topmenu li a:active等样式。

Answer 4

首先，您需要在li项目中包含链接，如下所示：

<li><a href="../folder/A.php">A</a></li>

这是嵌套它们的正确方法。然后，您希望为活动列表项提供class =“active”属性，并为其设置所需的css样式。

Answer 5

我也遇到了这个问题。所以我所做的是在

中添加了一个类。例如在你的情况下，我会这样做：

(1)在你的 HTML 代码中添加一个名为 active 的类作为第一步。

<div class="topmenu">

 <ul>
  <img src="includes/menu/pics.gif" alt="" style="float:left;"/>
  <a class="active" href="../folder/home.php"><li id="home">Home</li></a>
  <a href="../folder/A.php"><li>A</li></a>
  <a href="../folder/B.php"><li>B</li></a>``
  <a href="../folder/C.php"><li>C</li></a>
  <a href="../"><li id="logout">Logout</li></a>
 </ul>
</div>

其次，我所做的是打开我的 CSS 代码，然后输入：

     div.topmenu ul.active {`
`background-color:black;
 color:white;
}

它对我有用。希望对你有帮助。快乐编码！

实现时出现问题：在CSS按钮中处于活动状态

5 个答案: