Onmouseout和onmouseover組合無法隱藏和顯示圖像

Question

我有以下代碼：

<!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>

該代碼的目的是默認情況下顯示image1。

Onmouseover節目image2。

onmouseout顯示圖像1。

但是代碼沒有按預期工作，我哪里出問題了？

Answer 1

您有很多東西行不通。 例如，一個帶有display: none元素的元素將永遠不會觸發onmouseover因為它是不可見的。 或者，當您隱藏一個圖像時，另一個圖像不會顯示-您的代碼只是隱藏當前圖像，僅此而已。

要使其正常工作，您可以嘗試執行以下操作：

 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">

Onmouseout和onmouseover組合無法隱藏和顯示圖像

問題描述

1 個解決方案

解決方案1
2 已采納 2017-09-02 23:41:38

Onmouseout和onmouseover組合無法隱藏和顯示圖像

問題描述

1 個解決方案

解決方案1 2 已采納 2017-09-02 23:41:38

解決方案1
2 已采納 2017-09-02 23:41:38