2

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

Improve this question
5
  • you can probably do something with css only using adjacent sibling selectors. give this a read Commented Dec 27, 2011 at 12:44
  • @petervaz: I thought CSS didn't support back-traversal. Commented Dec 27, 2011 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 Commented Dec 27, 2011 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? Commented Dec 27, 2011 at 12:53
  • I don't want to color all '.normal' red but only the hovered one. Commented Dec 27, 2011 at 13:26

4 Answers 4

Reset to default
3

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

    });
})
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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 ;)
2

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

5 Comments

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 :/
Heres a example using your code: dl.getdropbox.com/u/4281191/test.html As you see it doesn't work :(
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 ^^
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. :)
Ah that explains a lot... But I still went for above since it does teh prev and next at the same time, two if's isn't invalid right?
1

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

4 Comments

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
if by "clean" you mean pointlessly check both prev and next, omitting curly braces, and having poor spacing, then yes, his code is "clean".
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
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
0

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/

Improve this answer

5 Comments

Instead of .css() you could also use .addClass() and .removeClass() as techfoobar did in his answer.
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...
What exactly? The CSS does the colorization of the element AFTER .special and the JS code the one before the .special.
I want '.special' to become green or blue depending if you hover the item before or after it and not the '.normal' element itself.
Okay, before i rewrite everything, use techfoobar's ;)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.