按钮 CSS 状态 - 在活动页面上保持悬停颜色答案

【问题标题】：Button CSS state - keep hover colour on active page按钮 CSS 状态 - 在活动页面上保持悬停颜色
【发布时间】：2020-10-31 04:00:11
【问题描述】：

我的主页上有一个按钮 www.example.com 指向页面 B -> www.example.com/page-B

我在 :hover 状态下使用 CSS，所以当我将鼠标悬停在主页上的按钮上时，它会变成红色。

但我想要实现的是按钮变为红色并在单击并到达目标页面时保持红色www.example.com/page-B

我希望通过 :active 或 :focus 状态来完成它，但这行不通。

我怎样才能做到这一点？

【问题讨论】：

【解决方案1】：

单击按钮时，焦点会转到该按钮。所以按钮的 :focus 伪类中的样式被应用。但是，一旦用户单击另一个按钮或通过按 Tab 键更改焦点，您的按钮就会失去“焦点”状态。

一个可用的选项是使用 :visited 伪类。您需要将按钮包裹在锚标记（<a></a>）周围。假设您为锚标记提供了一个 .link 类。

<a href="https://example.com/page-b" class="link">
    <input type="button" value="next page" />
</a>

那么css应该是，

.link:visited > button {
   color: blue;
}

请注意，我的目标是作为锚元素下的按钮的子元素。我这样做是因为按钮没有可以直接使用的 :visited 伪类。但是，根据MDN，

出于隐私原因，使用此选择器可以修改的样式非常有限。

所以我认为您不能使用这种方法使背景变红（我尝试过但没有奏效）。此外，即使用户重新访问了您的网站或重新加载了页面，您的按钮也会保持不变，一旦用户访问链接，“:visited”的样式就会变成 anchor 元素的工作方式。

我的建议是你应该在这里使用 javascript。我对wordpress不太了解，也不知道你是否可以在wordpress中使用js。但通常你甚至可以在 wordpress 中使用<script> 标签。

我的方法...

function nextpage() {
  window.open("https://www.example.com/page-b", "_blank");
  document.getElementById("next").style.backgroundColor = "red";
}

&lt;input type="button" value="next" onclick="nextpage()" id="next" /&gt;

即使我放了一个 sn-p，它也不会在 stackoverflow 中工作，可能是由于安全策略，但这应该在现实生活中工作。我在新选项卡中打开“example.com/page-b”，因为我在同一个选项卡中打开它 “example.com”选项卡将被关闭，当用户重新打开选项卡时，按钮的样式将丢失。

如果你想保持按钮的红色背景，那么使用js，当用户点击按钮时设置一个cookie，如果用户重新加载页面时cookie存在，则设置按钮的样式为已访问。

【讨论】：