时间戳

首页 > 解决方案 > 按钮 CSS 状态 - 在活动页面上保持悬停颜色

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

问题描述

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

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

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

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

我怎样才能做到这一点？

标签： htmlcsswordpressbutton

解决方案

单击按钮时，焦点转到该按钮。所以按钮的 :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。但通常你<script>甚至可以在 wordpress 中使用标签。

我的做法...

function nextpage() {
  window.open("https://www.example.com/page-b", "_blank");
  document.getElementById("next").style.backgroundColor = "red";
}
<input type="button" value="next" onclick="nextpage()" id="next" />

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

如果要保留按钮的红色背景，则使用 js，在用户单击按钮时设置 cookie，如果在用户重新加载页面时 cookie 存在，则将按钮设置为已访问。

推荐阅读