0

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;  
}

マウスが入ると、最大の 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にもそれを持ちたいのですが、それを機能させる方法がわかりません。助けが必要です。

4

0 に答える 0