removeClass при наведении на другой идентификатор

Question

removeClass при наведении на другой идентификатор

0

Вот код, который я написал. То, что он делает, это зависание над первым элементом, которое он добавляет классу, и этот класс имеет фоновое изображение, а также добавляет html для объяснения изображения, которое появляется из-за зависания. Проблема возникает после того, как я надвигаюсь на следующий элемент, который имеет старую информацию, которая появилась из предыдущего наведения с новым изображением addclass, и новый html, объясняющий появившееся новое изображение. Поэтому, если я вернусь к первому элементу, он не заменит изображение. Я уверен, что мне нужно как-то удалить класс, но я бы хотел, чтобы он сказал ему удалить класс, если есть что-то на месте. Вот код:

  function imageInfo(){
    $('#item_one').hover(function(){
        $('#img_holder').addClass('img_one');
        $('#about_me_cont aside p').html('text explaining img 1');
    });
    $('#item_three').hover(function(){
        $('#img_holder').addClass('img_two');
        $('#about_me_cont aside p').html('text explaining img 2');
    });
    $('#item_three').hover(function(){
        $('#img_holder').addClass('img_three');
        $('#about_me_cont aside p').html('text explaining img 3');
    });
  }

Это CSS:

.img_one{
    background-image: url('../images/img1.jpg');
    background-repeat: no-repeat;
    background-size:contain;
}
.img_two{
        background-image: url('../images/img2.jpg');
        background-repeat: no-repeat;
        background-size:contain;
}
.img_three{
    background-image: url('../images/img3.jpg');
    background-repeat: no-repeat;
    background-size:contain;
}

есть абзац, который вводится html, и я его стиль в CSS. Итак, что происходит после того, как я навешиваю элемент один, а затем перейдите к пункту 2, а затем вернитесь к пункту 1, он сохранит изображение объекта 2, изменения html, но изображение из пункта 2 этого не делает. Как бы я написал для него removeClass, если там есть класс, чтобы он снова вернулся к отображению первого изображения элемента? Спасибо за помощь!

Chipe 26 апр. 2014, в 06:30

Источник

Теги:

javascript

jquery

hover

removeclass

1 ответ

Ещё вопросы

Sam Hanley · Accepted Answer · 2014-04-26T02-57-00.000Z

У вас есть опечатка в вашем коде: где это должно быть

$('#item_two').hover(function(){

вместо этого он говорит item_three.

Тем не менее, нет ничего плохого в использовании функции jQuery removeClass, даже если нет классов, это не подведет. Таким образом, вы можете:

function imageInfo(){
    $('#item_one').hover(function(){
        $('#img_holder').removeClass().addClass('img_one');
        $('#about_me_cont aside p').html('text explaining img 1');
    });
    $('#item_three').hover(function(){
        $('#img_holder').removeClass().addClass('img_two');
        $('#about_me_cont aside p').html('text explaining img 2');
    });
    $('#item_three').hover(function(){
        $('#img_holder').removeClass().addClass('img_three');
        $('#about_me_cont aside p').html('text explaining img 3');
    });
  }

Спасибо за быстрый ответ! Извините за опечатку, изменил некоторые идентификаторы в этом примере, чтобы было легче читать, и сделал опечатку для этого примера. Но ваш ответ прекрасно работает! Еще раз спасибо!