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 show image2。

onmouseout show image1。

但代码没有按预期工作。我哪里出错？

Answer 1

你有很多事情都行不通。例如，ec2的元素永远不会触发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';
}

Onmouseout和onmouseover组合无法隐藏和显示图像

1 个答案: