up vote 2 down vote favorite
1
share [g+] share [fb]

Ok so heres my question: I got the following 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>

So now I want to know how to get some tricky hover effect:

  • When you hover '.normal': the text colors red.
  • When you hover '.normal' and 'special' is before it: '.normal' colors red and '.special' color green.
  • When you hover '.normal' and 'special' is after it: '.normal' colors red and '.special' color blue.

I think this is possible with JS/Jquery but I don't know even where to start.

Thanks for any help on this question.

P.S. For everyone who wonder where I will use this: http://dl.dropbox.com/u/4281191/weboutfit/index.html

link|improve this question
you can probably do something with css only using adjacent sibling selectors. give this a read – petervaz Dec 27 '11 at 12:44
@petervaz: I thought CSS didn't support back-traversal. – jnpcl Dec 27 '11 at 12:46
@jnpcl is rought. back-traversal is not yet supported, but you could make a much easier example with JQuery + CSS, posting answer in a few min – Sn0opy Dec 27 '11 at 12:48
1  
Do you only want the .special elements to be highlighted if they're adjacent to the hover element, or even if they're several elements apart? – jnpcl Dec 27 '11 at 12:53
I don't want to color all '.normal' red but only the hovered one. – seahorsepip Dec 27 '11 at 13:26
feedback

4 Answers

up vote 3 down vote accepted

Here is a pure jQuery solution for you, it implements all of your 3 requirements.

See a working demo: 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');        

    });
})
link|improve this answer
1  
This code seems to work perfect and is valid :D thanks a lot! What I like about your code is that it does prev&next at the same time ;) – seahorsepip Dec 27 '11 at 14:28
You are most welcome :) – Usman Dec 27 '11 at 14:33
feedback
up vote 1 down vote

jQuery solution: 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');
});
link|improve this answer
This code seems to work perfect and is valid but is less clean then the code from @Usman since it render after and before not at the same time. So I go with the code from Usman but most of the other posted answers are great too :D – seahorsepip Dec 27 '11 at 14:31
if by "clean" you mean pointlessly check both prev and next, omitting curly braces, and having poor spacing, then yes, his code is "clean". – jbabey Dec 27 '11 at 14:41
I mean by using else if instead of another if which makes the 2parts of code run after each other instead at the same time. And he was simply earlier too :P – seahorsepip Dec 27 '11 at 15:11
the two cases are mutually exclusive and they will not run asynchronously as you seem to be suggesting. having them in an if-else-if rather than two if statements is a performance gain. but yes he was earlier :P – jbabey Dec 27 '11 at 15:15
feedback
up vote 0 down vote

I made it a bit simpler with a CSS / JS combination

CSS:

.normal, .special {
    color: red;
}

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

JS:

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

Demo: http://jsfiddle.net/gn96t/

link|improve this answer
Instead of .css() you could also use .addClass() and .removeClass() as techfoobar did in his answer. – Sn0opy Dec 27 '11 at 13:00
Hmm I tried this too but it's kinda confusing :/ And does it work in atleast IE7? since I really need it working even in that old crap browser... – seahorsepip Dec 27 '11 at 13:19
What exactly? The CSS does the colorization of the element AFTER .special and the JS code the one before the .special. – Sn0opy Dec 27 '11 at 13:20
I want '.special' to become green or blue depending if you hover the item before or after it and not the '.normal' element itself. – seahorsepip Dec 27 '11 at 13:28
Okay, before i rewrite everything, use techfoobar's ;) – Sn0opy Dec 27 '11 at 13:50
feedback
up vote 2 down vote

Assuming you have 3 classes namely red, blue and green (each with one color definition each).

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

The hover code will be like:

$('.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');
});
link|improve this answer
I will give your code a try :D – seahorsepip Dec 27 '11 at 12:51
I tried and it didn't work at my website :/ it even didn't went trough validation... So I edited the code and fixed some validation things:dl.getdropbox.com/u/4281191/sdfhgxdhtgfchyjcyfgk.txt but it's still not working :/ – seahorsepip Dec 27 '11 at 13:15
Heres a example using your code: dl.getdropbox.com/u/4281191/test.html As you see it doesn't work :( – seahorsepip Dec 27 '11 at 13:24
I went with the code from Usman because it's a bit cleaner and it does prev&next at the same time but your code is fine too, it was great too ^^ – seahorsepip Dec 27 '11 at 14:34
You'll need to put this someplace such that it is executed only once the dom is ready. i.e. inside a $(document).ready() block. Check this fiddle: jsfiddle.net/pFPu8 for a running demo of the code i gave. :) – techfoobar Dec 27 '11 at 14:36
show 1 more comment
feedback

Your Answer

 
or
required, but never shown
discard

Not the answer you're looking for? Browse other questions tagged or ask your own question.