html - Hover over div breaks positioning jquery css -
jsfiddle: http://jsfiddle.net/y78a2/
i have element like
<div id="hoverdiv"></div> <div style="margin:0 auto;"> <div class="hover" hovertext="this div 1">div 1</div> <div class="hover" hovertext="this div 2">div 2</div> <div class="hover" hovertext="this div 3">div 3</div> </div> css this
#hoverdiv{ display:none; position:absolute; font-size:12px; background: rgba(0,0,0,.6); color: #ddd; border: 1px solid #999; padding:10px; z-index:10000; } jquery this
$(document).on('mousemove','.hover',function(e){ var hovertext = $(this).attr('hovertext'); $('#hoverdiv').text(hovertext) .css('top',e.pagey-95) .css('left',e.pagex+10) .show(); }).on('mouseout','.hover',function(){ $('#hoverdiv').hide(); }); my problem
- the
#hoverdivnot beside<div class="hover">(therefore have userpagey-95,pagex+10but works not screen sizes(for example after using values beside1280x720monitor not in1920x1280monitor i.e have use different values different monitors(screen sizes)! ).i don't know why happening) - the main problem whenever zooming out
<div class="hover">changes position(coz hasmargin:0 auto)#hoverdivremains in same position causing work unperfectly.
therefore appreciated.
update fiddle working fine after removing -95 pagey , +10 pagex ...but not on pc
update2
body{ background-color:#e7ebf2; font-family: 'lucida grande',tahoma,verdana,arial,sans-serif; font-size:11.5px; margin:0 auto; line-height: 1.28; direction:ltr; color:#333; word-wrap:break-word; } #main_body{ width:900px; background-color: rgba(194,206,231,.5); padding:50px; box-shadow:0 0 5px rgba(194,206,231,1); overflow:auto; position:relative; top:110px; margin:0 auto; } inside body contains main body contains these elements...
the problem #main_body style offsetting absolute positioning of #hoverdiv. here's fiddle handles situation adding position:relative container div can use offset of #main_body position #hoverdiv: http://jsfiddle.net/y78a2/5/
Comments
Post a Comment