我有几行代码可以在Firefox上正常工作,但在Chrome上不起作用
HTML
<div id="container" >
<div id="logo"></div>
<div id="wat" onmouseenter="showDiv(this)" onmouseleave="removeDiv(this)">
<div id="wathover">
<div id="watpopup">Dit is een test. Klik <a href="#" onclick="popup(this)">hier</a> voor meer informatie.
</div>
</div>
</div>
<div id="hoe"></div>
<div id="waarom"></div>
<div id="wanneer"></div>
<div id="voorbeeldbox1"></div>
<div id="voorbeeldbox2"></div>
<div id="voorbeeldbox3"></div>
<div id="wie"></div>
<div id="waar"></div>
</div>
javascript文件中的代码。
function showDiv(parent){
var child = $(parent).find("div").attr("id");
$('#'+child).animate({
height:'show'
},100);
}
function removeDiv(parent){
var child = $(parent).find("div").attr("id");
$('#'+child).animate({
height:'hide'
},100);
}
CSS
body {
margin:0px;
background-color: black;
}
#container{
margin:0 auto;
background-color: black;
width: 1100px;
height: 675px;
padding-top: 40px;
}
#logo{
margin-left: 30px;
width: 600px;
height: 150px;
margin-bottom: 10px;
background-image: url('../afbeeldingen/logoklein.png');
}
/* Wat blok*/
#wat {
display: block;
background-image: url('../afbeeldingen/wat.png');
background-color: gray;
width: 600px;
height: 340px;
margin-left: 50px;
-webkit-box-shadow: 1px 1px 2px;
box-shadow: 1px 1px 2px;
position: relative;
}
#wathover {
display: none;
background-color: #d8d8d8;
width: 600px;
height: 150px;
float: right;
margin-top: 190px;
position: absolute;
bottom: 0; left: 0;
}
#watpopup {
margin-left: 75px;
font-size: 25px;
margin-top: 55px;
}
#watinside {
display: none;
background-color: white;
width: 500px;
height: 400px;
font-size: 15px;
font-family: Georgia;
overflow: auto;
}
.wat_text {
font-size: 25px;
margin-left: 25px;
}
/* Hoe blok*/
#hoe {
background-color: gray;
width: 380px;
height: 100px;
margin-left: 670px;
margin-top: -340px;
}
/* waarom blok*/
#waarom {
background-color: gray;
width: 380px;
height: 100px;
margin-left: 670px;
margin-top: 20px;
}
/* wanneer blok*/
#wanneer {
background-color: gray;
width: 380px;
height: 100px;
margin-left: 670px;
margin-top: 20px;
}
/* voorbeeldbox1 blok*/
#voorbeeldbox1 {
background-color: gray;
width: 325px;
height: 150px;
margin-left: 50px;
margin-top: 20px;
}
/* voorbeeldbox2 blok*/
#voorbeeldbox2 {
background-color: gray;
width: 325px;
height: 150px;
margin-left: 388px;
margin-top: -150px;
}
/* voorbeeldbox3 blok*/
#voorbeeldbox3 {
background-color: gray;
width: 325px;
height: 150px ;
margin-left: 725px;
margin-top: -150px;
}
/* wie blok*/
#wie {
background-color: gray;
width: 495px;
height: 75px ;
margin-left: 50px;
margin-top: 20px;
}
/* waar blok*/
#waar {
background-color: gray;
width: 495px;
height: 75px ;
margin-left: 555px;
margin-top: -75px;
}
当鼠标进入时,它应该从de最大div的底部设置div。并且当div鼠标离开它时,它会使div恢复到不可见的状态,而不是在Firefox上。谁能帮我?语言对于那些感兴趣的人来说是荷兰语!
编辑:我已将其更改为:HTML:
<head>
<title>Double You Media</title>
<link rel='stylesheet' href='css/main.css' />
<script src="javascript/javascript.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="javascript/jquery.lightbox_me.js"></script>
<script>
$(document).ready(function(){
$("#wat").hover(function(){$('#wathover').stop().animate({height:'show'},100);}, function(){$('#wathover').stop().animate({height:'hide'},100);});
$("#hoe").hover(function(){$('#hoehover').stop().animate({height:'show'},100);}, function(){$('#hoehover').stop().animate({height:'hide'},100);});
$("#waarom").hover(function(){$('#waaromhover').stop().animate({height:'show'},100);}, function(){$('#waaromhover').stop().animate({height:'hide'},100);});
$("#wanneer").hover(function(){$('#wanneerhover').stop().animate({height:'show'},100);}, function(){$('#wanneerhover').stop().animate({height:'hide'},100);});
$("#voorbeeldbox1").hover(function(){$('#voorbeeldbox1hover').stop().animate({height:'show'},100);}, function(){$('#voorbeeldbox1hover').stop().animate({height:'hide'},100);});
$("#voorbeeldbox2").hover(function(){$('#voorbeeldbox2hover').stop().animate({height:'show'},100);}, function(){$('#voorbeeldbox2hover').stop().animate({height:'hide'},100);});
$("#voorbeeldbox3").hover(function(){$('#voorbeeldbox3hover').stop().animate({height:'show'},100);}, function(){$('#voorbeeldbox3hover').stop().animate({height:'hide'},100);});
$("#wie").hover(function(){$('#wiehover').stop().animate({height:'show'},100);}, function(){$('#wiehover').stop().animate({height:'hide'},100);});
$("#waar").hover(function(){$('#waarhover').stop().animate({height:'show'},100);}, function(){$('#waarhover').stop().animate({height:'hide'},100);});
});
</script>
</head>
<body>
<div id="container" >
<div id="logo"></div>
<div id="wat">
<div id="wathover">
<div id="watpopup">Dit is een test. Klik <a href="#" onclick="popup(this)">hier</a> voor meer informatie.
<div id="watinside">
<p class="wat_text"><br><br>Hier <br><br>kan <br><br>u nog veel<br><br> meer lezen over <br><br>het onderwerp <br><br>wat u wilt aanbieden</p>
</div>
</div>
</div>
</div>
<div id="hoe">
<div id="hoehover">
<div id="hoepopup">Dit is een test. Klik <a href="#" onclick="popup(this)">hier</a> voor meer informatie.
<div id="hoeinside">
<p class="hoe_text"><br><br>Hier <br><br>kan <br><br>u nog veel<br><br> meer lezen over <br><br>het onderwerp <br><br>wat u wilt aanbieden</p>
</div>
</div>
</div>
</div>
<div id="waarom">
<div id="waaromhover">
<div id="waarompopup">Dit is een test. Klik <a href="#" onclick="popup(this)">hier</a> voor meer informatie.
<div id="waarominside">
<p class="waarom_text"><br><br>Hier <br><br>kan <br><br>u nog veel<br><br> meer lezen over <br><br>het onderwerp <br><br>wat u wilt aanbieden</p>
</div>
</div>
</div>
</div>
<div id="wanneer">
<div id="wanneerhover">
<div id="wanneerpopup">Dit is een test. Klik <a href="#" onclick="popup(this)">hier</a> voor meer informatie.
<div id="wanneerinside">
<p class="wanneer_text"><br><br>Hier <br><br>kan <br><br>u nog veel<br><br> meer lezen over <br><br>het onderwerp <br><br>wat u wilt aanbieden</p>
</div>
</div>
</div>
</div>
<div id="voorbeeldbox1">
<div id="voorbeeldbox1hover">
<div id="voorbeeldbox1popup">Dit is een test. Klik <a href="#" onclick="popup(this)">hier</a> voor meer informatie.
<div id="voorbeeldbox1inside">
<p class="voorbeeldbox1_text"><br><br>Hier <br><br>kan <br><br>u nog veel<br><br> meer lezen over <br><br>het onderwerp <br><br>wat u wilt aanbieden</p>
</div>
</div>
</div>
</div>
<div id="voorbeeldbox2">
<div id="voorbeeldbox2hover">
<div id="voorbeeldbox2popup">Dit is een test. Klik <a href="#" onclick="popup(this)">hier</a> voor meer informatie.
<div id="voorbeeldbox2inside">
<p class="voorbeeldbox2_text"><br><br>Hier <br><br>kan <br><br>u nog veel<br><br> meer lezen over <br><br>het onderwerp <br><br>wat u wilt aanbieden</p>
</div>
</div>
</div>
</div>
<div id="voorbeeldbox3">
<div id="voorbeeldbox3hover">
<div id="voorbeeldbox3popup">Dit is een test. Klik <a href="#" onclick="popup(this)">hier</a> voor meer informatie.
<div id="voorbeeldbox3inside">
<p class="voorbeeldbox3_text"><br><br>Hier <br><br>kan <br><br>u nog veel<br><br> meer lezen over <br><br>het onderwerp <br><br>wat u wilt aanbieden</p>
</div>
</div>
</div>
</div>
<div id="wie">
<div id="wiehover">
<div id="wiepopup">Dit is een test. Klik <a href="#" onclick="popup(this)">hier</a> voor meer informatie.
<div id="wieinside">
<p class="wie_text"><br><br>Hier <br><br>kan <br><br>u nog veel<br><br> meer lezen over <br><br>het onderwerp <br><br>wat u wilt aanbieden</p>
</div>
</div>
</div>
</div>
<div id="waar">
<div id="waarhover">
<div id="waarpopup">Dit is een test. Klik <a href="#" onclick="popup(this)">hier</a> voor meer informatie.
<div id="waarinside">
<p class="waar_text"><br><br>Hier <br><br>kan <br><br>u nog veel<br><br> meer lezen over <br><br>het onderwerp <br><br>wat u wilt aanbieden</p>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
body {
margin:0px;
background-color: black;
}
#container{
margin:0 auto;
background-color: black;
width: 1100px;
height: 675px;
padding-top: 40px;
}
#logo{
margin-left: 30px;
width: 600px;
height: 150px;
margin-bottom: 10px;
background-image: url('../afbeeldingen/logoklein.png');
}
/* Wat blok*/
#wat {
display: block;
background-image: url('../afbeeldingen/wat.png');
background-color: gray;
width: 600px;
height: 340px;
margin-left: 50px;
-webkit-box-shadow: 1px 1px 2px;
box-shadow: 1px 1px 2px;
position: relative;
}
#wathover {
display: none;
background-color: #d8d8d8;
width: 600px;
height: 150px;
float: right;
margin-top: 190px;
position: absolute;
bottom: 0; left: 0;
}
#watpopup {
margin-left: 75px;
font-size: 25px;
margin-top: 55px;
}
#watinside {
display: none;
background-color: white;
width: 500px;
height: 400px;
font-size: 15px;
font-family: Georgia;
overflow: auto;
}
.wat_text {
font-size: 25px;
margin-left: 25px;
}
/* Hoe blok*/
#hoe {
width: 380px;
height: 100px;
margin-left: 670px;
margin-top: -340px;
background-image: url('../afbeeldingen/hoe.png');
}
#hoehover {
display: none;
background-color: #d8d8d8;
width: 380px;
height: 100px;
float: right;
position: absolute;
bottom: 1000; left: 1000;
}
#hoepopup {
margin-left: 25px;
font-size: 20px;
margin-top: 30px;
}
#hoeinside {
display: none;
background-color: white;
width: 500px;
height: 400px;
font-size: 15px;
font-family: Georgia;
overflow: auto;
}
.hoe_text {
font-size: 25px;
margin-left: 10px;
}
/* waarom blok*/
#waarom {
background-image: url('../afbeeldingen/waarom.png');
width: 380px;
height: 100px;
margin-left: 670px;
margin-top: 20px;
}
#waaromhover {
display: none;
background-color: #d8d8d8;
width: 380px;
height: 100px;
float: right;
position: absolute;
bottom: 1000; left: 1000;
}
#waarompopup {
margin-left: 25px;
font-size: 20px;
margin-top: 30px;
}
#waarominside {
display: none;
background-color: white;
width: 500px;
height: 400px;
font-size: 15px;
font-family: Georgia;
overflow: auto;
}
.waarom_text {
font-size: 25px;
margin-left: 10px;
}
/* wanneer blok*/
#wanneer {
background-image: url('../afbeeldingen/wanneer.png');
width: 380px;
height: 100px;
margin-left: 670px;
margin-top: 20px;
}
#wanneerhover {
display: none;
background-color: #d8d8d8;
width: 380px;
height: 100px;
float: right;
position: absolute;
bottom: 1000; left: 1000;
}
#wanneerpopup {
margin-left: 25px;
font-size: 20px;
margin-top: 30px;
}
#wanneerinside {
display: none;
background-color: white;
width: 500px;
height: 400px;
font-size: 15px;
font-family: Georgia;
overflow: auto;
}
.wanneer_text {
font-size: 25px;
margin-left: 10px;
}
/* voorbeeldbox1 blok*/
#voorbeeldbox1 {
background-image: url('../afbeeldingen/product1.png');
width: 325px;
height: 150px;
margin-left: 50px;
margin-top: 20px;
}
#voorbeeldbox1hover {
display: none;
background-color: #d8d8d8;
width: 325px;
height: 150px;
float: right;
position: absolute;
bottom: 1000; left: 1000;
}
#voorbeeldbox1popup {
margin-left: 25px;
font-size: 20px;
margin-top: 30px;
}
#voorbeeldbox1inside {
display: none;
background-color: white;
width: 500px;
height: 400px;
font-size: 15px;
font-family: Georgia;
overflow: auto;
}
.voorbeeldbox1_text {
font-size: 25px;
margin-left: 10px;
}
/* voorbeeldbox2 blok*/
#voorbeeldbox2 {
background-image: url('../afbeeldingen/product2.png');
width: 325px;
height: 150px;
margin-left: 388px;
margin-top: -150px;
}
#voorbeeldbox2hover {
display: none;
background-color: #d8d8d8;
width: 325px;
height: 150px;
float: right;
position: absolute;
bottom: 1000; left: 1000;
}
#voorbeeldbox2popup {
margin-left: 25px;
font-size: 20px;
margin-top: 30px;
}
#voorbeeldbox2inside {
display: none;
background-color: white;
width: 500px;
height: 400px;
font-size: 15px;
font-family: Georgia;
overflow: auto;
}
.voorbeeldbox2_text {
font-size: 25px;
margin-left: 10px;
}
/* voorbeeldbox3 blok*/
#voorbeeldbox3 {
background-image: url('../afbeeldingen/product3.png');
width: 325px;
height: 150px ;
margin-left: 725px;
margin-top: -150px;
}
#voorbeeldbox3hover {
display: none;
background-color: #d8d8d8;
width: 325px;
height: 150px;
float: right;
position: absolute;
bottom: 1000; left: 1000;
}
#voorbeeldbox3popup {
margin-left: 25px;
font-size: 20px;
margin-top: 30px;
}
#voorbeeldbox3inside {
display: none;
background-color: white;
width: 500px;
height: 400px;
font-size: 15px;
font-family: Georgia;
overflow: auto;
}
.voorbeeldbox3_text {
font-size: 25px;
margin-left: 10px;
}
/* wie blok*/
#wie {
background-image: url('../afbeeldingen/wie.png');
width: 495px;
height: 75px ;
margin-left: 50px;
margin-top: 20px;
}
#wiehover {
display: none;
background-color: #d8d8d8;
width: 495px;
height: 75px;
float: right;
position: absolute;
bottom: 1000; left: 1000;
}
#wiepopup {
margin-left: 25px;
font-size: 20px;
margin-top: 30px;
}
#wieinside {
display: none;
background-color: white;
width: 500px;
height: 400px;
font-size: 15px;
font-family: Georgia;
overflow: auto;
}
.wie_text {
font-size: 25px;
margin-left: 10px;
}
/* waar blok*/
#waar {
background-image: url('../afbeeldingen/waar.png');
width: 495px;
height: 75px ;
margin-left: 555px;
margin-top: -75px;
}
#waarhover {
display: none;
background-color: #d8d8d8;
width: 495px;
height: 75px;
float: right;
position: absolute;
bottom: 1000; left: 1000;
}
#waarpopup {
margin-left: 25px;
font-size: 20px;
margin-top: 30px;
}
#waarinside {
display: none;
background-color: white;
width: 500px;
height: 400px;
font-size: 15px;
font-family: Georgia;
overflow: auto;
}
.waar_text {
font-size: 25px;
margin-left: 10px;
}
您可以在www.dymedia.nl/doubleyoumedia上看到该网站。您可以看到它现在正常运行。但当你徘徊很多次时,它的开始就会翻转。或者你看到动画div的一半,或者你看到一条线或你根本看不到它们。有什么想法导致这个?正如你所看到的那样,大块的div从底部开始。我想在其他div上也有这个,但我不知道如何让它工作。帮助会受到影响。