如何解决悬停Fontawesome Pro后的jQuery属性更改仅起作用一次
尝试使用Fontawesome Pro在悬停时创建简单的评分系统。基本上,当悬停时,所有先前的图标上都应显示实心星星,而接下来的所有图标上应均亮起。
<div id="ratings" class="panel-body">
<h1>Ratings</h1>
<i class="fal fa-star fa-2x" aria-hidden="true"></i>
<i class="fal fa-star fa-2x" aria-hidden="true"></i>
<i class="fal fa-star fa-2x" aria-hidden="true"></i>
<i class="fal fa-star fa-2x" aria-hidden="true"></i>
<i class="fal fa-star fa-2x" aria-hidden="true"></i>
</div>
jquery是:
$(document).ready(function() {
$("#ratings svg").hover(function() {
var $this = $(this);
$this.nextAll().attr('data-prefix','fal');
$this.prevUntil("h1").attr('data-prefix','fas');
$this.attr('data-prefix','fas');
});
});
它只能运行一次,并在第一次更改后立即停止。还尝试过删除attr
,但还是没有运气。
$(document).ready(function() {
$("#ratings svg").hover(function() {
var $this = $(this);
$this.nextAll().removeAttr('data-prefix','fas').attr('data-prefix','fal');
$this.prevUntil("h1").removeAttr('data-prefix','fal').attr('data-prefix','fas');
$this.removeAttr('data-prefix','fas');
});
});
解决方法
使用Fontawesome Pro,您必须将<i>
放在span
内
<div id="ratings" class="panel-body">
<h1>Ratings</h1>
<span><i class="fal fa-star fa-2x" aria-hidden="true"></i></span>
<span><i class="fal fa-star fa-2x" aria-hidden="true"></i></span>
<span><i class="fal fa-star fa-2x" aria-hidden="true"></i></span>
<span><i class="fal fa-star fa-2x" aria-hidden="true"></i></span>
<span><i class="fal fa-star fa-2x" aria-hidden="true"></i></span>
</div>
并在svg
内定位span
$("#ratings span").hover(function () {
var $this = $(this);
$this.nextAll().find('svg').attr('data-prefix','fal');
$this.prevUntil("h1").find('svg').attr('data-prefix','fas');
$this.find('svg').attr('data-prefix','fas');
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。