Jquery/JS код Hover/CSS

Question

ИТАК Heres мой вопрос: я получил следующий HTML:

<ul> 
    <li class="normal">Item1</li> 
    <li class="normal">Item2</li> 
    <li class="special">Item3</li> 
    <li class="normal">Item4</li> 
    <li class="normal">Item5</li> 
</ul> 

Так что теперь я хочу знать, как получить каверзный парения эффект:

• Когда вы наводите «.normal»: текст красным цветом.
• Когда вы наведите «.normal» и «special» перед ним: «.normal» цвета красный и «.специальный» цвет зеленый.
• Когда вы наводите '.normal' и 'special' после этого: '.normal' colors красный и '.special' цвет синий.

Я думаю, что это возможно с JS/Jquery, но я не знаю, с чего начать.

Спасибо за любую помощь по этому вопросу.

P.S. Для всех, кто задается вопросом, где я буду использовать это: http://dl.dropbox.com/u/4281191/weboutfit/index.html

Answer 1

Предполагая, что у вас есть 3 класса, а именно красный, синий и зеленый (каждый с одним определением цвета каждый).

.red { 
    color: red; 
} 
.blue { 
    color: blue; 
} 
.green { 
    color: green; 
} 

Код парения будет как:

$('.normal').hover(function() { 
    $(this).addClass('red'); 
    if($(this).prev().hasClass('special') { 
     $(this).prev().addClass('blue'); 
    } 
    else if($(this).next().hasClass('special') { 
     $(this).next().addClass('green'); 
    } 
}, function() { 
    $('.normal').removeClass().addClass('normal'); 
    $('.special').removeClass().addClass('special'); 
}); 

Answer 2

Я сделал это немного проще с CSS комбинации/JS

CSS:

.normal, .special { 
    color: red; 
} 

.special + li:hover { 
    color: green; 
} 

JS:

$('.special').prev().hover(function() { 
    $(this).css('color', 'green'); 
}, function() { 
    $(this).css('color', 'red'); 
}); 

Демонстрация: http://jsfiddle.net/gn96t/

Answer 3

Это решение для чистого jQuery для вас, оно выполняет все ваши 3 требования.

Смотрите рабочую демо:http://jsfiddle.net/usmanhalalit/Rn3jR/2/

$(function(){ 
    $('.normal').hover(function(){ 
     $(this).css('color','red'); 
     var $prev=$(this).prev(); 
     var $next=$(this).next(); 
     if($prev.hasClass('special')) 
      $prev.css('color','green'); 
     if($next.hasClass('special')) 
      $next.css('color','blue'); 
    },function(){ 
     $(this).css('color','black');   
     $('.special').css('color','black');   

    }); 
}) 

Answer 4

JQuery решение: http://jsfiddle.net/mQWsP/1/

$('.normal').hover(function() { 
var that = $(this), 
    special = $('.special'); 

that.addClass('red'); 

if (that.prev('li').hasClass('special')) { 
    special.addClass('green'); 
} else { 
    if (that.next('li').hasClass('special')) { 
     special.addClass('blue'); 
    } 
} 
}, 
function() { 
    $('.special').removeClass().addClass('special'); 
    $(this).removeClass().addClass('normal'); 
});