Question

下面的代码应该保持所选链接突出显示但不突出显示，它只会在点击时闪烁绿色。请帮我看看这里失败了什么。

#sidebarContent a:active{
    background-color: green;
}

<div id="sidebarContent">
  <ul>
    <li style="margin-bottom:10px"><a style="outline:none" href="#">Manage</a></li>
    <li style="margin-bottom:10px"><a style="outline:none" href="#">Links</a></li>
  </ul>    
</div>

Answer 1

您在href上没有链接，您需要设置foucs来更改颜色

＆＃13;

#sidebarContent a:active , #sidebarContent a:focus{
  background-color: green;
}

＆＃13;

<div id="sidebarContent">
  <ul>
    <li style="margin-bottom:10px"><a style="outline:none" href="#">Manage</a></li>
    <li style="margin-bottom:10px"><a style="outline:none" href="#">Links</a></li>
  </ul>    
</div>

＆＃13;

Answer 2

使用:hover突出显示：

＆＃13;

#sidebarContent a:hover{
  background-color: green;
}

＆＃13;

<div id="sidebarContent">
  <ul>
    <li style="margin-bottom:10px"><a style="outline:none" href="#">Manage</a></li>
    <li style="margin-bottom:10px"><a style="outline:none" href="#">Links</a></li>
  </ul>    
</div>

＆＃13;

Answer 3

＆＃13;

#sidebarContent a:focus{
  background-color: green;
}

＆＃13;

<div id="sidebarContent">
  <ul>
    <li style="margin-bottom:10px"><a style="outline:none" href="#">Manage</a></li>
    <li style="margin-bottom:10px"><a style="outline:none" href="#">Links</a></li>
  </ul>    
</div>

＆＃13;

Answer 4

您必须修改 css 。即

<style>
    /* unvisited link */

    a:link {
        background-color: red;
    }

    /* visited link */

    a:visited {
        background-color: green;
    }

    /* mouse over link */

    a:hover {
        background-color: hotpink;
    }

    /* selected link */

    a:active {
        background-color: blue;
    }
</style>

如何通过突出显示所选链接？

4 个答案: