我创建了一个代码来更改svg图标的类。使用Chrome的检查,我可以看到它已按预期将svg类成功地从“ fa-circle”更改为“ fa-check-circle”。但是,图标保持不变,没有任何反应。
function mouseOverEffect() {
//JQUERY, FIND A VANILLA JS SOLUTION?
$("#inbox-circle").mouseover(function() {
console.log($(this).hasClass('fa-circle'))
if ($(this).hasClass('fa-circle')) {
$(this).removeClass( "fa-circle" ).addClass( "fa-check-circle" )
}
});
}
我是否缺少有关svg的信息? 完整的功能在这里:https://pastebin.com/3Dyv25xf
答案 0 :(得分:0)
我认为jquery正在使用setAttribute()将属性值附加到节点。对于svg,我们必须使用setAttributeNS()方法。
您可以尝试以下代码
$(this).removeClass( "fa-circle" ) ;// After this code
//.addClass( "fa-check-circle" ) // comment this code
$(this)[0].setAttributeNS(null, "class", "far fa-check-circle" ); // add this line
答案 1 :(得分:0)
使用CSS伪元素和伪类:hover
。与JS / jQ相比,CSS的处理能力更小,更易于编写和维护,并且IMO的性能更好。请参阅 CSS Pseudo-Elements | Font Awesome
HTML
<i class="icon circle"></i>
查看CSS演示
:root {
font: 5vw/1.2 Verdana;
}
.icon::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
}
.circle::before {
font-weight: 400;
content: "\f111";
}
.circle:hover::before {
font-weight: 400;
content: "\f058";
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet" crossorigin="anonymous">
<ul class='inbox'>
<li class="row inbox-item">
<div class="col-2 col-lg-2"><i class="icon circle" style="color:red"></i></div>
<div class="col-4 col-lg-6">test </div>
<div class="col-4 col-lg-2">07-21-19</div>
<div class="col-2 col-lg-2 task-actions"><i class="fas fa-ellipsis-h"></i></div>
</li>
<li class="row inbox-item">
<div class="col-2 col-lg-2"><i class="icon circle" style="color:gold"></i></div>
<div class="col-4 col-lg-6">test </div>
<div class="col-4 col-lg-2">07-24-19</div>
<div class="col-2 col-lg-2 task-actions"><i class="fas fa-ellipsis-h"></i></div>
</li>
<li class="row inbox-item">
<div class="col-2 col-lg-2"><i class="icon circle" style="color:blue"></i></div>
<div class="col-4 col-lg-6">test </div>
<div class="col-4 col-lg-2">07-29-19</div>
<div class="col-2 col-lg-2 task-actions"><i class="fas fa-ellipsis-h"></i></div>
</li>
<li class="row inbox-item">
<div class="col-2 col-lg-2"><i class="icon circle" style="color:gold"></i></div>
<div class="col-4 col-lg-6">test </div>
<div class="col-4 col-lg-2">07-25-19</div>
<div class="col-2 col-lg-2 task-actions"><i class="fas fa-ellipsis-h"></i></div>
</li>
</ul>