Jquery/JS/CSS 悬停代码

Question

好的，这是我的问题： 我得到了以下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' 颜色 红色和“.special”绿色。
• 当您将鼠标悬停在 '.normal' 和 'special' 之后：'.normal' 颜色 红色和“.special”蓝色。

我认为 JS/Jquery 可以做到这一点，但我什至不知道从哪里开始。

感谢您对这个问题的任何帮助。

附： 对于想知道我将在哪里使用它的每个人：http://dl.dropbox.com/u/4281191/weboutfit/index.html

Answer 1

这是一个纯 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 2

假设您有 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 3

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');
});

Answer 4

我使用 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/