Question

我在这里很困惑，

a:active无效，但:hover工作正常，
我尝试过很多东西，但这些东西让我卡住了，真的让人感到困惑我刚刚在表格中添加了链接，我已将单元格添加到类.menu1。现在，当我访问活动页面时，活动链接没有被高亮显示。

这是我的代码：

HTML：

<table style="margin-bottom:15px" >
 <tr>
    <td><a href="ts_cms.php"><img src="../images/admin/prop_btn.png"></a></td>
    <td><a href="#"><img src="../images/admin/pack_btn.png"></a></td>
    <td> <a href="#"><img src="../images/admin/blog_btn.png"></a></td>
 </tr>
 <tr>
    <td class= "menu1"><a href="ts_cms.php">Add property</a></td>
    <td class= "menu1"><a href="#">Add package</a></td>
    <td class= "menu1"><a href="#">Add Blog</a></td>
 </tr>
 </tr>
 <tr>
    <td class= "menu1"><a href="#">Remove property</a></td>
    <td class= "menu1"><a href="#">Remove package</a></td>
    <td class= "menu1"><a href="#">Remove Blog</a></td>
 </tr>
 </tr>
 <tr>
    <td class= "menu1"><a href="#">Update property</a></td>
    <td class= "menu1"><a href="#">Update package</a></td>
    <td class= "menu1"><a href="#">Update Blog</a></td>
 </tr>
 </tr>
 <tr>
    <td class= "menu1"><a href="#">List all properties</a></td>
    <td class= "menu1"><a href="#">List all packages</a></td>
    <td class= "menu1"><a href="#">List all Blogs</a></td>
 </tr>
 </table>

CSS：

.menu1 {
  background-repeat:no-repeat;
  background-size:auto;
  margin-left:10px;
  background-position:center;
  background-image:url(../images/admin/menu_1.png);
  vertical-align:central;
  text-align:center;
  color:#FFF;
}
    ,
.menu1:hover {
    color:#0CF;
    background-image:url(../images/admin/menu_1_hover.png);
}

.menu1 a {
    color:#FFF;
}  

.menu1 a:hover {
    color:#0CF;
} 

.menu1 a:active {
    color:#000;
}

Answer 1

:active并不意味着“具有解析为当前网页网址的href属性”。这意味着“在被激活时”（例如点击）。您可以将它用于制作看起来像按钮的东西看起来像是在被点击时被压下的东西。

CSS没有“具有href属性的选择器，该属性可解析为当前页面的URL”。您需要修改DOM。通常，您可以通过生成导航菜单服务器端并添加额外的类或删除当前页面的<a>元素（可能使用<span>代替）来完成此操作。

Answer 2

正如@quentin所提到的，您不能使用CSS来确定href是否引用了实际的URL，但您可以使用CSS中的属性选择器来检查href的特定值：

.menu1 a[href="#"]{
  color: #000;
}

您可以查看MDN以获取有关属性选择器的更多信息。

Answer 3

a:active是你click and hold the link的时候。不适合主动选择。我建议使用Js作为活动的Menu对象：）

注意//您已关闭的两个</tr>代码 - 但您只需关闭一个代码。为你编辑。

a：活动不起作用

3 个答案: