Question

总而言之，我试图在网页加载时隐藏图像旁边的文本，然后在用户将鼠标悬停在相应图像上时显示该文本。

我似乎无法显示文字。这是代码：

<section class = muliticolumn >
        <img class="menuSmall" src="../images/margherita.png" onmouseover="showMargTopp()">
        <h2>Margherita</h2>
        <p id="margTopp">Tomato, mozzarella and basil</p>
    </section>

这是图片和文字的代码。

#margTopp{display:none;}

CSS。

function showMargTopp() {
        document.getElementByID("margTopp").style.display="block";
    }

JavaScript。

我尝试了几种不同的方法，但似乎无法正常工作。感谢您的帮助。

Answer 1

ID应该在您的函数中为ID。

function showMargTopp() {
  document.getElementById("margTopp").style.display="block";
}

如果希望在停止悬停时再次将其隐藏，则将需要onmouseout事件的另一个功能。

function hideMargTopp() {
  document.getElementById("margTopp").style.display="none";
}

对此更简单的解决方案是使用CSS :hover

为什么此JavaScript在我的网站上不起作用？

1 个答案: