hover - Using jQuery to highlight a div, whilst greying out others -

hover - Using jQuery to highlight a div, whilst greying out others -

i'm half way there issue have become stuck. believe similar issues have been raised in past nil quite i'm looking for.

i have demo code on jsfiddle can viewed here: http://jsfiddle.net/wolfhook/jb36d/

html

<div id="thumbscontainer"> <div class="imageholder"> image in here... </div> <div class="imageholder"> image in here... </div> <div class="imageholder"> image in here... </div>

css

#thumbscontainer { background:#000; padding:20px; overflow:auto;} .imageholder { background:#eee; float:left; margin:5px; width:50px; height:50px; padding:5px; border:1px solid #666;}

jquery

$('#thumbscontainer').children('.imageholder').hover(function() { $(this).siblings().stop().animate({'opacity':'0.5'}); }, function() { $(this).siblings().stop().animate({'opacity':'1'}); });

the desired effect have divs display per normal, 1 time hover on div, other surrounding ones gray out or have sort of overlay added them. purpose give impression div have mouse pointer on highlighted.

you can see code have on jsfiddle achieves applies opacity each div rather sort of overlay , it's causing me problems, on current project divs sit down above background image rather total black background opacity isn't going work , makes whole thing confusing.

ideally apply div overlay on unhighlighted divs , can style using css give greyed out effect. @ stage i'm open suggestions on how accomplish desired effect.

anyone kind plenty chip in , provide me pointers?

much appreciated.

instead of applying opacity imageholder div, or introducing new overlay element, why not apply opacity contents (e.g. thumbnail image) of div? background color of imageholder show through, providing grayness of "grayed out" effect.

new:

$('#thumbscontainer').children('.imageholder').hover(function() { $(this).siblings().children('img').stop().animate({'opacity':'0.5'}); }, function() { $(this).siblings().children('img').stop().animate({'opacity':'1'}); });

sample updating yours thumbnails within imageholders , background image behind all: http://jsfiddle.net/jb36d/11/

jquery hover overlay mouseover highlight