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'并且'特殊'在它之后：'。normal'颜色红色和'.special'颜色为蓝色。

我认为这可以通过JS / Jquery实现，但我甚至不知道从哪里开始。

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

P.S。对于每个想知道我将在哪里使用它的人：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/

Jquery / JS / CSS悬停代码

4 个答案: