将鼠标悬停在java脚本中div中的文本显示图像上

Question

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

     function show1() {
            document.getElementById("img1").display = 'block';
     }
     function hide1() {
            document.getElementById("img1").display = 'none';
        }

</script>
</head>
<body>
<a href="http://www.feverpitchholidays.com/corporate-team-outing-lnt/"><span onMouseOver="show1()" onMouseOut="hide1()">Corporate Team Outing - LNT</span></a>

<div id="img1" style="display:none">
    <img src="" alt="image 1" />
    <img src="" alt="image 2" />
</div>
</body>
</html>

我希望当你将鼠标放在文本上时，它会在div中显示图像。我正在尝试这样做，但它不起作用。

Answer 1

忘了javascript吧！CSS就是答案。将鼠标悬停在ID:img1和div中的图像上(如果不执行后者，将鼠标悬停在图像上将抵消div鼠标所在的位置。所以它看起来像这样(不是内联样式，因为鼠标悬停在状态声明上)：

#img1 {
  Background-image: none;
}

#img1:hover, img1:hover img {
  Background-image: url(your URL);
}

您可以将ID更改为类，这样CSS就可以重用，并保留ID用于编码(javascript等)