Значок не меняется при наведении

ProgramBox

Значок не меняется при наведении

Post author:admin
Запись опубликована:5 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Итак, у меня есть значок, который меняется при наведении на него. По какой-то причине исходный значок все еще остается. Вот мой код

 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 / Есть идеи?

Ответ №1:

Обновленный код

Почему бы не использовать 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 .

1. Это не эквивалентно. Вы добавляете fa-heart-o класс, но не удаляете fa-heart класс, в результате чего оба класса становятся активными одновременно, хотя должен быть только один. Вам нужно .addClass('fa-heart-o').removeClass('fa-heart') и '.addClass('fa-heart').removeClass('fa-heart-o') .

2. Хотя вы правы, недавно добавленный класс переопределит свойства css предыдущего класса, поэтому нет необходимости его удалять.

3. Вау, нет, нет, этого не будет. CSS работает не так. Это не имеет никакого отношения к тому, когда класс был добавлен к элементу. Если это то, что вы думаете, то ваш ответ неверен и содержит ошибку.

4.Да, в этом случае это может сработать, поэтому это особенно серьезная ошибка. Это будет работать не во всех случаях. Если бы стили для .fa-heart-o были перечислены перед стилями для .fa-heart в таблице стилей, ваш пример не сработал бы. Bootstrap может свободно изменять порядок этих стилей в любой момент, поэтому ваш код может неожиданно прерваться в любой момент в будущем, потому что вы написали его, не понимая, как работает специфика CSS.

5. Да, вы были правы. Видел некоторые вопросы о приоритете класса. 1 за ваш ответ

Ответ №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');
});

1. Можете ли вы предоставить демо? Похоже, у меня это не работает jsbin.com/yekebeva/1/edit

2. @user302975 Ты не копировал мой код. В вашем коде синтаксическая ошибка (отсутствует ' ), и в нем отсутствует вторая половина моего toggleClass вызова. Вам нужно переключить оба класса. Я не собираюсь делать демо, просто скопируйте и вставьте мой код, как написано.

3. И вы написали свой JavaScript в поле CSS . Эта скрипка — jsbin — очень сломана.

Ответ №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>