ONMOUSEOUTとのonmouseoverコンボは非表示にする作業をしていない表示画像

私は次のコードを持っている：ONMOUSEOUTとのonmouseoverコンボは非表示にする作業をしていない表示画像

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
    <img src="bhutu_kitten.jpg" alt="kitten bhutu" width="400" height="400" id="kitten" onmouseover=displayKitten() onmouseout=hideKitten() style="display: none"> 
    <img src="bhutu_baby.jpg" alt="baby bhutu" width="400" height="400" id="baby" onmouseover=hideBaby() onmouseout=displayBaby() style="display: block"> 

<script> 
    function displayKitten(){ 
     document.getElementById("kitten").style.display='block'; 
    } 
    function hideKitten(){ 
     document.getElementById("kitten").style.display='none'; 
    } 
    function hideBaby(){ 
     document.getElementById("baby").style.display='none'; 
    } 
    function displayBaby(){ 
     document.getElementById("baby").style.display='block'; 
    } 
</script> 
</body> 
</html>

コードの目的は、デフォルトのショーのイメージ1によってです。

オンマウスオーバー画像2を表示します。

onmouseout show image1。

しかし、コードは正常に動作していません。間違っていますか？

出典

2017-09-02 Sonevol

あなたにはうまくいかないことがたくさんあります。たとえば、display: noneの要素は、表示されないためonmouseoverをトリガーすることはありません。 1つの画像を隠しているときには、もう一方の画像は表示されません。コードは現在のコードを隠すだけで、それだけです。

function displayKitten(){ 
 
    document.getElementById("kitten").style.display='block'; 
 
    document.getElementById("baby").style.display='none'; 
 
} 
 

 
function displayBaby(){ 
 
    document.getElementById("baby").style.display='block'; 
 
    document.getElementById("kitten").style.display='none'; 
 
}

<img src="//lorempixel.com/400/300" 
 
    alt="kitten bhutu" 
 
    width="200" 
 
    height="200" 
 
    id="kitten" 
 
    onmouseover=displayBaby()> 
 

 
<img src="//lorempixel.com/300/400" 
 
    alt="baby bhutu" 
 
    width="200" 
 
    height="200" 
 
    id="baby" 
 
    onmouseout=displayKitten() 
 
    style="display: none">

：それはあなたがこのような何かを試すことができます動作させるために

出典

2017-09-02 23:41:38

ONMOUSEOUTとのonmouseoverコンボは非表示にする作業をしていない表示画像

答えて

関連する問題