使用javascript在悬停时显示文本

问题描述 投票:0回答:1

我正在制作一个其中某些文本块将随机不可见的应用。我正在使用以下代码使某些文本消失

我的HTML将如下所示:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <span>Hello. My name is Tom </span>
        <span>And I like to play video games </span>
        <span>But I am too old to be goofing around </span>
    </body>
</html>

和Javascript:

document.addEventListener("DOMContentLoaded", function(event) {
    for (var i = 0; i < document.querySelectorAll("span").length; i++ ){
        var hiddenProbability = Math.floor(Math.random() * 100 ) + 1;
        if(hiddenProbability <= 50) {
            document.querySelectorAll("span")[i].style.visibility = "hidden";
        }
    }
});

一旦我将房子悬停在它们上方,如何使跨度范围内的看不见的单词块变得可见。我尝试使用CSS(可见性:visible),但是没有生效。

javascript dom addeventlistener
1个回答
0
投票

您的JavaScript是否正在运行?如果我对问题的理解正确,听起来您只是在添加一个事件监听器,该事件监听器在页面内容首次加载时发生(取决于您的脚本在html中的位置,它可能会触发也可能不会触发)。] >

如果您希望他们对鼠标事件做出反应,则需要根据实际需要使用onmouseover(或onmouseenter)。

https://www.w3schools.com/jsref/event_onmouseover.asp

如果只是在页面首次加载时发生,那么您可能只需要修改事件侦听器。Code inside DOMContentLoaded event not working

© www.soinside.com 2019 - 2024. All rights reserved.