jquery .show on mouseenterは、2つのdivが並んでいるときにポップアップdivを歪ませます。

Question

jquery.load関数を使用してhrefをロードするdivを作成しました。 hrefの上にマウスを置くと、.loadを使って別のポップアップdivがロードされます。 （日付の）1つのdiv要素がロードされたときに

すべてが正常に見えるPIC（show1）enter image description here

を参照してくださいしかし、私は日付の第二のdivをロードする際にポップアップがすべてdistordedは、PIC（show2を参照してください取得）enter image description here

なぜこれが起こっているすべてのアイデア？

ありがとうございました。

---

これは、のhrefにdivをロードするコードです：

<script> 
$(document).ready(function(){ 
$("#left1");   
});                
</script> 

<script> 
$(document).ready(function(){ 
$("#center1");   
});                
</script> 

<script> 
$(document).ready(function(){ 
$("#center2");   
});                
</script>    

<script> 
$(document).ready(function(){ 
$("#center3").load("2016_select_paycheck_to_view.php");   
});                
</script>  

<script> 
$(document).ready(function(){ 
$("#center4").load("2015_select_paycheck_to_view.php");   
});                
</script> 

#center3 { 
border-top: 1px solid green; 
border-bottom : 1px solid green; 
border-left : 0px solid green; 
border-right : 1px solid green; 

background-color: #FDF5E6; 
display: inline-table;  

width: 190px; 
height: 480px; 
}  

m3 
{ 
font-family: calibri; 
color: black; 
font-size: 1em; 
text-align: left; 
border-top: 2px solid #4d4d4d; 
border-left: 2px solid #4d4d4d; 
border-right: 0px solid #4d4d4d; 

position: relative; 
top: 0px; 
left: 0px; 

padding: 0.2em;  
margin-bottom: 0px; 
margin-left: 0px; 
width: 78px; 
line-height: 0.8em; 
} 

m3t 
{ 
font-family: arial black; 
color: white; 
font-size: 1em; 
text-align: center; 
border-top: 3px solid #8A0800; 
border-left: 1px solid #8A0800; 
border-right: 1px solid #8A0800; 
border-bottom: 3px solid #8A0800; 

position: relative; 
left: 2px; 

padding-top: 0.4em; 
padding-bottom: 0.4em; 
padding-left: 0.1em; 

margin-bottom: 0px; 

width: 79px; 
line-height: 85%; 
background-color: #8A0800; 
} 

m3b 
{ 
font-family: arial black; 
color: white; 
font-size: 1em; 
text-align: center; 
border-top: 3.3px solid #8A0800; 
border-left: 1px solid #8A0800; 
border-right: 1px solid #8A0800; 
border-bottom: 3.3px solid #8A0800;  
position: relative; 
left: 2px; 

padding-top: 0.4em; 
padding-bottom: 0.4em; 
padding-left: 0.1em; 
margin-top: 0.8px; 

width: 79px; 
line-height: 85%; 
background-color: #8A0800; 
} 

#center4 { 
border-top: 1px solid green; 
border-bottom : 1px solid green; 
border-left : 0px solid green; 
border-right : 1px solid green; 
background-color: #FDF5E6;    

width: 190px; 
height: 480px; 
} 

m4 
{ 
font-family: calibri; 
color: black; 
font-size: 1em; 
text-align: left; 
border-top: 2px solid #4d4d4d; 
border-left: 2px solid #4d4d4d; 
border-right: 0px solid #4d4d4d; 
display: block; 
float: left; 
clear: both; 

position: relative; 
top: 0px; 
left: 0px; 

padding: 0.2em;  
margin-bottom: 0px; 
margin-left: 0px; 
width: 78px; 
line-height: 0.8em; 
} 

m4t 
{ 
font-family: arial black; 
color: white; 
font-size: 1em; 
text-align: center; 
border-top: 3px solid #8A0800; 
border-left: 1px solid #8A0800; 
border-right: 1px solid #8A0800; 
border-bottom: 3px solid #8A0800; 

display: block; 
float: left; 
clear: both; 

position: relative; 
left: 2px; 

padding-top: 0.4em; 
padding-bottom: 0.4em; 
padding-left: 0.1em; 

margin-bottom: 0px; 

width: 79px; 
line-height: 85%; 
background-color: #8A0800; 
} 

m4b 
{ 
font-family: arial black; 
color: white; 
font-size: 1em; 
text-align: center; 
border-top: 3.3px solid #8A0800; 
border-left: 1px solid #8A0800; 
border-right: 1px solid #8A0800; 
border-bottom: 3.3px solid #8A0800; 

display: block; 
float: left; 
clear: both; 

position: relative; 
left: 2px; 

padding-top: 0.4em; 
padding-bottom: 0.4em; 
padding-left: 0.1em; 
margin-top: 0.8px; 

width: 79px; 
line-height: 85%; 
background-color: #8A0800; 
} 

<div id="firstwrapper">  
<div id="left1"> 2019 </div>        
<div id="center1"> 2018 </div>  
<div id="center2"> 2017 </div>         
<div id="center3"> 2016 </div>  
<div id="center4"> 2015 </div> 
</div> 

これはポップアップdivをロードするコードです：

$(function() { 

$("a#trigger").mouseenter(function() { 
$("div#pop-up").clearQueue();  
$("div#pop-up").show(); 
});    
$("a#trigger").mouseleave(function() { 
$("div#pop-up").delay(60).slideUp(); 
}); 
$("div#pop-up").mouseenter(function() { 
$(this).clearQueue(); 
}); 
$("div#pop-up").mouseleave(function() { 
$(this).delay(200).slideUp(); 
}); 

$("a#trigger").mousemove(function(){ 
var x = $("#center3").offset(); 

if(x.top > 400, x.left > 9) { 

var moveDown = 200; 
var moveLeft = -200; 

$("div#pop-up").css('top', x.top + moveDown).css('left', x.left + moveLeft); 

} else if(x.top > 600, x.left > 40) { 

var moveDown = 200; 
var moveLeft = -200; 

    $("div#pop-up").css('top', x.top + moveDown).css('left', x.left + moveLeft); 

} else { 

var moveDown = 200; 
var moveLeft = -200; 

$("div#pop-up").css('top', x.top + moveDown).css('left', x.left + moveLeft);  
}  
}); 

<style type="text/css"> 
#secondwrapper { 
border: 0px dashed red; /* black */ 
background: transparent; 
position: relative; 
left: 0px; 
top: 0px; 
z-index: 20; 
width: 190px; 
height: 480px; 
} 

#middle1 { 

border: 1px dashed teal; 
width: 190px; 
height: 480px; 

display: block; 
clear: both; 
float: left; 

position: absolute; 
left: 0px; 
top: 0px; 

margin-top: 0px; 
margin-bottom: 20px; 
background-color: #FDF5E6; 
}   

m1year 
{ 
font-family: arial; 
color: black; 
font-weight: 700; 
font-size: 0.9em; 
text-align: left; 
border: 1px dotted red; 

display: block; 
float: left; 
clear: both; 

position: relative; 
top: 0px; 
left: 0px; 

padding: 0.3em;  

width: 50px; 
height: 8px; 
line-height: 0.7em; 
background-color: transparent; 
}   

m1 
{ 
font-family: calibri; 
color: #8c0000; 
font-size: 1em; 
text-align: left; 
border-top: 1px solid black; 
border-left: 1px solid black; 
border-right: 1px solid black; 
display: block; 
float: left; 
clear: both; 

position: relative; 
top: 0px; 
left: 0px; 

padding: 0.36em;  
margin-bottom: 0em; 
margin-left: 10px; 
width: 155px; 

height: 5px; 
line-height: 4.3px; 

background-color: white; 
} 
a:link { 
text-decoration: none; 
color: #8c0000; 
} 
a:visited { 
color: #8c0000; 
} /* visited link */ 
a:hover { 
color: red; 
} /* mouse over link */ 

div#pop-up { 
display: none; 

position: absolute; 
left: 100px; 
z-index: 30; 

width: 550px; 
height: 600px; 

background: transparent; 
color: #000000; 
border: 0px dashed #ff6600; /* ORANGE */ 
} 

</style>  

<script> 
$(document).ready(function(){ 
$("#pop-up").load("2016_dump_expenses_sums_PER_PAYCHECK_DYNAMIC.php? THURSDAY=<?PHP echo ($array0); ?>&WEDNESDAY=<?PHP echo ($array13); ?>&pay=<?PHP echo (958); ?>"); }); 
</script> 

<div id="secondwrapper">  

<div id="middle1" 
<m1year> 2016 </m1year>  
<m1>  
<A HREF="2016_dump_expenses_sums_PER_PAYCHECK_DYNAMIC.php?THURSDAY=<?PHP echo ($array0); ?>&WEDNESDAY=<?PHP echo ($array13); ?>&pay=<?PHP echo (958); ?> " 
TARGET="mainFrame" id="trigger"> 
<?PHP 
print ("$newMonth1");                    
print ("&nbsp"); 
print ("$newDay1"); 
print ("&nbsp"); 
print ("-"); 
print ("&nbsp"); 
print ("$newMonth1a"); 
print ("&nbsp"); 
print ("$newDay1a"); 
?> 
</A></m1> 

</div> 
</div>      
<div id="pop-up"> </div>   
<div id="pop-up2"> </div> 
<div id="pop-up3"> </div>  
<div id="pop-up4"> </div> 

Answer 1

してください、私たちにマークアップを表示し、あなたが使用しているCSS：それはCSSの問題に固有のもののように見えます。

Answer 2

私はそれを修正したと思います。それは私のCSSだった私はいくつかの部門を削除し、それは今okを動作しているようだ。