我有两个按钮：
1 – 跟随
2 – 取消关注
1 – 跟随
2 – 取消关注
乍一看,将显示“关注”按钮,然后当您将鼠标悬停在“关注”按钮上时,我想让关注按钮消失并显示取消关注按钮,然后在“取消关注”按钮上方悬停一次后,我想要“关注”按钮出现和取消关注按钮消失,所以我该怎么做？
欢迎反馈.
<div class="btn-follow">Follow</div> <div class="btn-unfollow">Unfollow</div>
CSS代码
.btn-follow {
color: #FFF;
background-color: #38B7EA;
padding: 5px 0;
width: 100px;
margin: 0 auto;
border-radius: 20px;
}
.btn-unfollow {
color: #FFF;
background-color: #A5BECB;
padding: 5px 0;
width: 100px;
margin: 0 auto;
border-radius: 20px;
}
解决方法
我所说的另一种更优化的解决方案可以用于下面的相同按钮：
HTML
<button id="followUnFollow" class="followUnF follow">Follow</button>
JS
$(document).ready(function(){
$('#followUnFollow').on('click',function()
{
if($(this).hasClass('follow'))
$(this).removeClass('follow').addClass('unfollow').text('Unfollow');
else
$(this).removeClass('unfollow').addClass('follow').text('Follow');
});
});
UPDATE
如果您想在悬停而不是点击时使用相同的内容,则可以更改.on(‘click’悬停如下：
$('#followUnFollow').hover(function(){
......
});
