Question

是否可以仅使用：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>

Answer 1

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

＆＃13;

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;
 }

＆＃13;

<a href="##"><span class="smallbox"></span></a>

＆＃13;

正如Dekel在评论中所指出的，锚元素中的div是无效的HTML。您可以欺骗并在链接中放置一个范围并将其显示属性设置为＆＃34;阻止＆＃34;，但这可能不是更好。

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

Answer 2

与其将其应用于 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;
}

如何更改链接中div的背景颜色

2 个答案: