Question

所以我有一个图标，当你将鼠标悬停在它上面时会发生变化。出于某种原因，原始图标仍然存在。这是我的代码

var originalContent = $('.fa-heart').html();
$('.fa-heart').hover(function() {
     $('.fa-heart').html('<i class="fa fa-heart-o"></i>');   
}, function() {
     $('.fa-heart').html(originalContent); 
});

一个演示http://jsbin.com/favukece/1/有什么想法吗？

Answer 1

<强> Updated Code

为什么不使用 addClass() / removeClass() ？添加的类将覆盖上一个类的属性。

$('.fa-heart').hover(function() {
     $(this).addClass('fa-heart-o');   
}, function() {
     $(this).removeClass('fa-heart-o'); 
});

根据Meagar的建议更新：

$('.fa-heart').hover(function() {
     $(this).toggleClass('fa-heart-o fa-heart');   
}, function() {
     $(this).toggleClass('fa-heart-o fa-heart'); 
});

在您当前的代码中，图标使用class而非html绑定到元素。

Answer 2

这不是.html所做的。您正在设置元素的内容，而不是替换元素自己的标记。

这就是您在现有<i>标记中使用嵌套<i>标记的原因。

如果要替换元素，请找到其父容器并设置其 html。

相反，由于您实际想做的就是更改课程，只需使用.addClass和.removeClass或.toggleClass直接更改课程。

$('.fa-heart').hover(function() {
  $(this).toggleClass('fa-heart-o fa-heart');
}, function() {
  $(this).toggleClass('fa-heart-o fa-heart');
});

Answer 3

这个答案与您提出的问题略有不同，但您可能会喜欢它。

    <!DOCTYPE html>
<html>
<head>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

  <style>
#container {
    max-width:180px;
    height:auto;
    padding:10px;
    margin:20px auto 0px auto;
}


#container #menu-wrap {
    width:100%;
    height:auto;
    background:#FFF;
    /*border-bottom:#09F thin solid;
    border-bottom-width:3px;*/
    padding:0px 0px 0px 0px;
    margin:0px 0px 50px 0px;
    text-align:center;
    line-height:13px;
}

#container #menu-wrap .menu-item {
    width: 38px;
    height: 40px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

#container #menu-wrap .menu-item i {
    width:100%;
    padding:7px 0px 5px 0px;
    border-radius:3px;
}

#container #menu-wrap .menu-item i.fa-heart-o {
    background:#3B5998;
    color:#FFF;
}

#container #menu-wrap .menu-item span {
    width:32px;
    height:32px;
    position: absolute;
    top: 10px;
    left: 0px;
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    display: block;
    color:#445878;
    background:#FFF;
    border-radius:50%;
}

#container #menu-wrap .menu-item span:hover {
    top: -29px;
    font-size:20px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

span.active {
    top:-20px !important;
    font-size:0px !important;
}

#container #menu-wrap .menu-item a {
    font-size:12px;
    color:#445878;
    text-decoration:none;
}

#container #menu-wrap .menu-item .text {
    text-decoration: none;
    font-size: 0px;
    padding:0px 0px 17px 0px;
    text-align: center;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    width: 100%;
    position: absolute;
    bottom: -27px;
    display: block;
     background-color: #FFF;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#container #menu-wrap .menu-item:hover > .text {
    bottom: 0;
    font-size:25px;
    padding:0;
    -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    text-align:center;
}

#container #menu-wrap .menu-item .icon {
    width: 32px;
    height: 32px;
    padding:13px 9px 5px 4px;
    font-size:25px;
    text-align:center;
}

html, body{
     margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
   }
</style>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container">
    <div id="menu-wrap">
      <div class="menu-item">
            <span id="active" class="fa fa-heart-o"></span>
            <a id="hover" class="text" href="#">
              <i class="fa fa-heart-o"></i>
            </a>
      </div>
    </div>
  </div>
</body>
</html>

图标不会改变悬停

3 个答案: