[Solved] Affecting non-hovered items

[dcp3450]

I want to only affect non-hovered items in a list. For example:

Code:

• List items
• List items
• List items
• List items
• List items

I want all items full opacity but when I hover over an items the other drop to .5 opacity. I know how to affect one’s I’m currently hovered over. However, I want the opposite effect.

[Chris Coyier]

Code:

$(function() {

$(“ul”).delegate(“li”, “mouseover mouseout”, function(e) {

$(“ul li”).not(this).css(“opacity”, e.type == ‘mouseover’ ? 0.5 : 1);

});

});

[dcp3450]

Awesome! Thanks Chris. I could have sworn you covered this in an article once but I couldn’t find it.

[dcp3450]

Chris,

I used:

Code:

$(“ul”).delegate(“li”, “mouseover mouseout”, function(e) {
$(“ul li”).not(this).css(“opacity”, e.type == ‘mouseover’ ? 0.5 : 1);
});

and

Code:

$(“li”).hover(function() {
$(“li”).not(this).css(“opacity”, 0.5);
}, function() {
$(“li”).not(this).css(“opacity”, 1);
});

both work great, however, IE freaks the text out and changes their alignment and size. The text even gets choppy.
http://www.chattahoocheetech.edu/sandbox/newctc/sports/crosscountry/

any ideas?

[davmillar]

Wouldn’t something like this work? Tested it quickly using Firebug in Firefox 3.5.5 on Win XP.

Code:

ul {opacity:1;}
ul:hover li {opacity:0.5;}
ul li:hover {opacity:1;}

[Author]

Posts