2

是否可以仅使用 :visited 伪类而不使用 Javascript 来更改链接内 div 的背景颜色？

<!DOCTYPE html>
<html>
    <head>
      <style>
            a:hover {background-color:blue;}
            a:visited {background-color:green;}

           .smallbox {
            background-color: #666;
            height: 50px;
            width: 50px;
           }
           .smallbox:hover {background-color:blue;}
           .smallbox:visited {background-color:green;}
      </style>
    </head>
    <body>
        <a href="#"><div class="smallbox"></div></a>
    </body>
</html>
4

2 回答 2

1

是的，我相信你可以做到这一点。只要记住访问的伪类属于链接，而不是 div。

a:hover .smallbox {background-color:blue;}
a:visited .smallbox {background-color:green;}
a:visited .smallbox:hover {background-color:blue;}

 .smallbox {
  display: block;
  background-color: #666;
  height: 50px;
  width: 50px;
 }
 
<a href="##"><span class="smallbox"></span></a>

正如 Dekel 在评论中指出的那样，锚元素内的 div 是无效的 HTML。您可以作弊并在链接中放置一个跨度并将其显示属性设置为“阻止”，但这可能并不是真的更好。

如果您只需要一个行为类似于块元素而不是内联元素的链接，请考虑将锚标记的显示属性切换为block并完全删除内部元素，如这篇文章中所建议的那样：<div> 内 <a>

于 2017-08-17T21:24:36.180 回答
0

与其将其应用于 div，不如将其直接应用于“a”标签，就像您所做的那样，然后删除 div？你为什么需要它？a: hover { background-color:blue; }应该可以正常工作。您也只需要display:block在a:hover样式中添加一个。

或者，如果您a在页面上有多个标签并且只想将其应用于其中一个，您可以使用 id 并将其应用于：

<a id="someId" href="#">My Link</a>

CSS：

#someId {
    background-color: blue;
    display: block;
}
于 2021-06-17T21:26:24.423 回答