jquery - In hidden part of div :hover still works and is visible -
i have simple coding: http://jsfiddle.net/8ama4/20/ (the stupid colors indication ;))
basically work, glitch don't know how fix. in div there picture "pages", slide side press buttons , 1 visible @ time. when hover visible picture fading in appears. problem fading in on hover appears in supposed-to-be-hidden part of div too. (you can see in jsfiddle example, if move mouse right side of man div).
can hep me solution? should change either of 2 "effect" (the hover , sliding)?
html:
<div class="tab-box"> <div class="tabs"> <div class="tab">1</div> <div class="tab">2</div> <div class="tab">3</div> </div> <div class="items"> <div class="item" style="background: red;"> <a href="#"><span class="rollover"></span><img class="thumbnail" alt="" src="http://www.sxc.hu/pic/m/s/sk/skapie/1218910_guitar.jpg"/></a> </div> <div class="item" style="background: blue;"> <a href="#"><span class="rollover"></span><img class="thumbnail" alt="" src="http://www.sxc.hu/pic/m/s/sk/skapie/1218910_guitar.jpg"/></a> </div> <div class="item" style="background: green;"> <a href="#"><span class="rollover"></span><img class="thumbnail" alt="" src="http://www.sxc.hu/pic/m/s/sk/skapie/1218910_guitar.jpg" /></a> </div> </div> </div>
jquery:
$(document).ready(function() { $('.tab-box').each(function() { var left = 0; var $tabbox = $(this); var width = $tabbox.width(); $(this).find('.tab').each(function() { var shift = left; $(this).click(function() { $tabbox.find('.items').animate({marginleft: shift + 'px'}); $tabbox.find('.tab').removeclass('active'); $(this).addclass('active'); }); left -= width; }); $(this).find('.tab:eq(0)').addclass('active'); }); });
you missed position:relative
@ .tab-box
.
working: http://jsfiddle.net/8ama4/26/
Comments
Post a Comment