当2个div并排时，mouseView上的jquery .show会扭曲弹出div

时间：2016-09-04 05:02:18

标签： php jquery

我创建了一个使用jquery .load函数加载hrefs的div。 当你将鼠标放在一个href上时，它会使用.load加载另一个弹出div。

当加载1个div（带有日期）时，所有内容都显示正常，请参阅pic（show1）enter image description here

enter image description here

但是当我加载第二个div日期时，弹出窗口会被所有distorded看到pic（show2）enter image description here

enter image description here

为什么会发生这种情况？

感谢。

这是使用hrefs加载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>

2 个答案:

答案 0 :(得分：0)

好的我想我修好了。这是我的css我删除了一些div现在似乎正常工作。

答案 1 :(得分：-1)

请向我们展示您正在使用的标记和CSS：它看起来像css问题固有的东西。

相关问题
最新问题