在懸停時更改glyphicon（引導程序）

Question

我有一個圖標：

<span class='glyphicon glyphicon-heart-empty' aria-hidden='true'></span>

懸停時，我希望glyphicon從heart-empty變為：

<span class='glyphicon glyphicon-heart' aria-hidden='true'></span>

然后，如果用戶單擊該圖標，該按鈕將帶有glyphicon heart ；如果用戶再次單擊該圖標，它將使其狀態恢復為heart-empty 。

我在這里看到了這個JSfiddle ，它懸停時顯示一個圖標，而我希望它完全更改該圖標。 我試圖在JSfiddle中使用該方法，但是我無法讓它做我想做的事情。

Answer 1

您可以將:before偽元素的content屬性更改為所需圖標的屬性。

CSS

span.clicked:before {
  content: "\e005";
} 

通過在單擊圖標時添加一個類，然后可以應用新的圖標代碼。

JS

document.querySelector('span').addEventListener('click', function (e) {
    e.target.classList.toggle('clicked')
});

演示

Answer 2

您可以在下面看到一個示例

<div>
<span class='glyphicon glyphicon-heart-empty' data-clicked="false" aria-hidden='true'></span> The Heart
</div>
<div>
<span class='glyphicon glyphicon-heart-empty' data-clicked="false" aria-hidden='true'></span> The Heart
</div>
<div>
<span class='glyphicon glyphicon-heart-empty' data-clicked="false" aria-hidden='true'></span> The Heart
</div>

和JavaScript部分應該像

$("div").click(function() {
        var icon = $("span.glyphicon", this);
        var isClicked = icon.data("clicked");
    icon.data("clicked", !isClicked);
}).hover(function () {
    // hover in      
    var icon = $("span.glyphicon", this);
    var isClicked = icon.data("clicked");
    var remCls = isClicked ? "glyphicon-heart" : "glyphicon-heart-empty",
            addCls = isClicked ? "glyphicon-heart-empty" : "glyphicon-heart"
    icon
        .removeClass(remCls)
      .addClass(addCls);
}, function () {
    // hover out
    var icon = $("span.glyphicon", this);
    var isClicked = icon.data("clicked");
    var remCls = isClicked ? "glyphicon-heart-empty" : "glyphicon-heart",
            addCls = isClicked ? "glyphicon-heart" : "glyphicon-heart-empty"
    icon
        .removeClass(remCls)
      .addClass(addCls);
});

小提琴示例： https : //jsfiddle.net/88nara7m/1/