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

  1. the #hoverdiv not beside <div class="hover"> (therefore have user pagey-95 , pagex+10 but works not screen sizes(for example after using values beside 1280x720 monitor not in 1920x1280 monitor i.e have use different values different monitors(screen sizes)! ).i don't know why happening)
  2. the main problem whenever zooming out <div class="hover"> changes position(coz has margin: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

Popular posts from this blog

java - Intellij Synchronizing output directories .. -

git - Initial Commit: "fatal: could not create leading directories of ..." -