我有两个按钮:
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(){ ...... });