JQuery набор активных / парящих фоновых изображений

Question

У меня есть список из 5 элементов, первый (при загрузке) активен (с классом 'active', добавленным jQuery). Все они имеют фоновые изображения, связанные с ними. Если я щелкаю по любому другому обновлению div с соответствующим содержимым (это работает).

Однако я борюсь со следующим:

Если вы щелкнете по li, обновите его фоновое изображение, чтобы оно стало цветным (суффикс '-cl.png'). Когда я наведите курсор мыши на другое, обновите его фоновое изображение, чтобы оно стало цветным, и оставьте цвет выделенного (с классом «активный») тоже. Если li не наведен, установите фоновое изображение черно-белым (суффикс «-bw.png»), но оставьте активным один цвет.

Надеюсь, я все объяснил ясно. Есть идеи, как мне этого добиться? Спасибо, Бретт

Вот мой HTML:

<ul class="graduate_tab">
<li class="graduate1"><a href="#grad1"><span class="gradimg1">grad1</span></a></li>
<li class="graduate2"><a href="#grad2"><span class="gradimg2">grad2</span></a></li>
<li class="graduate3"><a href="#grad3"><span class="gradimg3">grad3</span></a></li>
<li class="graduate4"><a href="#grad4"><span class="gradimg4">grad4</span></a></li>
<li class="graduate5"><a href="#grad5"><span class="gradimg5">grad5</span></a></li></ul>

Answer 1

$('.graduate_tab li').hover(
  function() { 
    $(this).css('background-image','your-image-cl.jpg'); 
  }, function() {
    $(this).css('background-image','your-image.jpg'); 
  });

$('.graduate_tab li').click( function() {
  $('.graduate_tab li').removeClass('active');
  $(this).addClass('active');
});

Это должно сработать. Если я что-то забыл, скажите мне, и я отредактирую код.

Answer 2

Во-первых, я бы сделал большую часть работы в CSS, например:

.graduate1 { background: url(image1-bw.png); }
.graduate1.active, .graduate1:hover { background: url(image1-cl.png); }
.graduate2 { background: url(image2-bw.png); }
.graduate2.active, .graduate2:hover { background: url(image2-cl.png); }
//etc...

Тогда в jQuery вам нужно беспокоиться только о классе active, например:

$('.graduate_tab li').click( function() {
  $(this).addClass('active').siblings().removeClass('active');
});

Использование .addClass() для выбранного и .removeClass() для остальных переместит класс active в выбранный ... если вы хотите чтобы удалить его из уже активного (выключить), вы можете заменить .addClass() на .toggleClass() для этого поведения.

Answer 3

Я использовал функцию jquery при наведении курсора. Не нужно давать каждому li класс в css. Следовательно:

.ui-state-active, .ui-state-hover  {
    font-weight: bold !important;
    //and other css
}

и

 jQuery('.graduate_tab li').bind('click hover', function () {
        jQuery(this).addClass('.ui-state-active')
                    .siblings().removeClass('.ui-state-active');

 });

Надеюсь, это кому-нибудь поможет.

Answer 4

    $('.titleclz').mouseenter(function( event ) {

    $(this).css('background-image','url(bg-image1.png path)');
    $(this).css('background-repeat','no-repeat'); 

});

$(".titleclz").mouseleave(function( event ) {

    $(this).css('background-image','url(bg-image2.png path)');
    $(this).css('background-repeat','no-repeat');

});

JQuery получает эффект наведения фона изображения ...

Answer 5

вы можете использовать : Парить

собственность в css

active: hover {background-color: black;}

что-то вроде этого ...

но я не уверен, что это будет работать в ie6.