我正在为我的网站开发一个关注者系统。当用户访问另一个用户的页面时，他们应该可以根据情况选择关注或取消关注。
如果当前用户（user1）正在关注另一个用户（user2），我想在页面顶部显示“已关注”。如果用户 1 将鼠标悬停在显示“正在关注”的文本上，则该文本应更改为“取消关注”，表明他们是否单击按钮，用户 1 将取消关注用户 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;
}
基本上，我们将两个“状态”放在一个跨度内，并且一次只显示这些跨度之一。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句