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
#hoverdiv
not beside<div class="hover">
(therefore have userpagey-95
,pagex+10
but works not screen sizes(for example after using values beside1280x720
monitor not in1920x1280
monitor 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
)#hoverdiv
remains 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