Question

我正在为我的网站开发关注者系统。当用户访问另一个用户的页面时，他们应该可以根据情况选择跟随还是不跟随。

如果当前用户（user1）跟随另一个用户（user2），我想在页面顶部显示“正在关注”。如果user1将鼠标悬停在“正在关注”文本上，则该文本应更改为“取消关注”，表明他们单击了按钮，user1将取消关注user2。最好的方法是什么？我应该使用在另一页上运行功能的按钮还是链接。谢谢。

Answer 1

动态执行此操作非常困难，但是您可以使用CSS pseudo-class在两个预设的文本值之间轻松切换。

基本上，文本被添加为data-attribute，然后换出。但是，您还需要确保屏幕阅读器具有“默认”文本。

button {
 font-size: 20px;
 padding: 10px 20px;
}

button span {
  display:none;
}

button:after {
  content: attr(data-btnText); 
}

button:hover:after {
  content: attr(data-btnHoverText);
}

<button data-btnText="text 1" data-btnHoverText="other text"><span>text 1</span></button>

但是正如其他人所说，这不是一个很好的UX模式。

Answer 2

此原型应演示我如何实现此效果。

https://codepen.io/JimmyJames88/pen/ymjpMg

移动浏览器在处理：hover

方面可能有所不同。

侧注-您可能希望在按钮上设置固定宽度，以防止在悬停时改变大小。

<div class="follow-button">
  <span>Following</span>
  <span>Unfollow</span>
</div>

.follow-button {
  background-color: #333;
  color: #FFF;
  display: inline-block;
  padding: 1rem;
  border-radius: 3px;
  font-family: sans-serif;
  cursor: pointer;
}

.follow-button > span:nth-child(2),
.follow-button:hover > span:nth-child(1) {
  display: none;
}

.follow-button:hover > span:nth-child(2) {
  display: inline;
}

基本上，我们将两个“状态”都放在一个范围内，并且一次仅显示这些范围之一。

当使用CSS将鼠标悬停在按钮上时，如何更改其文本？

2 个答案: