Создание эффекта липкого наведения при помощи jquery

Question

Я пытаюсь создать эффект, который немного сложнее, чем css (и, по всей видимости, я).

Идея состоит в том, чтобы при загрузке страницы был активен один из 5 DIV, а затем, пока не активируется другой DIV, предыдущий остается активным. По сути, всегда будет активный элемент.

Все, что нужно сделать, это скрыть .promoExpand и показать при наведении.

Вот что у меня есть:

$(document).ready(function(){
    $('.promo').mouseenter(function () {
        $(this).find('.item').addClass('promoExpand').siblings().removeClass('promoExpand');
    });
});

и фрагмент HTML.

 <div class="promo">
    <img src="img/thumb/gratings.jpg">
    <h3>Fibreglass</h3>
    <div class="item">
      <p>These products are for the home. We specialise all of our decking for use by you.</p>
    </div>
  </div>

Спасибо за любую помощь,

Том

Answer 1

siblings будет искать элементы с одним и тем же родителем, и, похоже, ваши .promoExpand элементы будут находиться в разных областях. Используйте это вместо:

$(document).ready(function(){
    $('.promo').mouseenter(function () {
        $(".promoExpand").removeClass('promoExpand'); //Remove all promoExpand classes here
        $(this).find('.item').addClass('promoExpand'); //Add the new one here.
    });
});

Answer 2

Это еще один вариант, установите для начала активный элемент, а затем повторите все промо-боксы и переключите классы.

$(document).ready(function(){
    $('.promo').mouseenter(function() {
        $('.promo').each(function() {
             $(this).removeClass('active');
        });
        $(this).addClass('active');
    });
 });

Пример: http://jsfiddle.net/QHa7M/21/

Я думаю, это то, что вы хотите!

Answer 3

попробуйте взглянуть на это:

javascript: (сначала я удалил все классы promoexpand, а затем добавил его к находящемуся в очереди)

$(document).ready(function(){

$('.promo').mouseenter(function () {
    $('.promoExpand').removeClass('promoExpand');
  $(this).find('.item').addClass('promoExpand')
});

});

рабочий пример: (нене обращая внимания на мой CSS, я наложил некоторые фиктивные CSS на элементы, чтобы прояснить визуально)

http://jsfiddle.net/QHa7M/1/

Answer 4

Вызов siblings() не сработает (я полагаю, у вас много элементов .promo).Сделайте что-то вроде этого:

$('.promo').bind('mouseover', function () {
    $('.item').removeClass('promoExpand');
    $(this).find('.item').addClass('promoExpand');
});