将 A:活动样式设置为具有名称值的链接

当您单击链接时，将应用单击链接的活动样式。因此，当我有一个链接，该链接使用其名称从 url 调用和激活，如下所示，为什么我的代码不起作用？

.box{
   display:block;
   width:100px;
   height:100px;
   background:gray;
   margin:20px 0px;
}
a{
   -moz-transition:all 1s ease;
   -webkit-transition:all 1s ease;
}
a:active{
   background:orange;
}

<body>
    <a href="#user">user</a>    
    <a class="box" name="user">userbox</a>
</body>

我希望它在从 url 调用用户框时为用户框调用 a：active css。我的代码是否无效或不是此类情况的选项？

我认为你想要的伪类是:focus . 单击链接时应用:active。

-编辑-

在我测试的浏览器中，只有 Internet Explorer 11 在更新 URL 以包含 #user 时聚焦锚点。您可以使用 JavaScript 设置类，如下所示：

window.addEventListener('hashchange', function () {
  var activeElement = document.getElementById(window.location.hash.substring(1));
  if (activeElement) {
    activeElement.className = 'active';
  }
});

这需要使用以下 CSS：

.active {
  color: orange;
}

这假设使用 id="user" 而不是 name="user"，两者在 URL 哈希方面的行为相同。

我希望它在从 url 调用用户框时为用户框调用 a：active css。我的代码无效或不是这种情况的选择？

你不能。 :active的意思是"在被点击或以其他方式激活时"。这并不意味着"具有解析为当前 URI 的 href 属性"。

使用一些其他机制，例如向 HTML 中的元素添加类。

我们可以破解它，我们有技术。
严肃地说，你应该在这个解决方案中使用类和Javascript，但我把太多的午餐时间放在了这个上面，不能把它扔掉。

http://jsfiddle.net/DF4VG/

.CSS：

#label {
    display: block;
}
#label:hover {
    cursor: pointer;
    text-decoration: underline;
}
#container {
    position: relative;
}
#wrapper {
    z-index: 2;
    position: relative;
}
#user {
    border: none;
    background: transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    transition: all 1s ease;
}
#user:focus {
    background: orange;
}

.HTML：

<form action="">
    <label id="label" for="user">User</label>
    <div id="container">
        <div id="wrapper">
            <p>There is some content in here</p>
            <p>And some more</p>
            <p>And so forth</p>
        </div>
        <input type="text" id="user" value="" readonly>
    </div>
</form>

相关内容

最新更新

热门标签：