javascript 脚本没有 show/hide 特定的 div 元素

Question

我正在学习 css、html 和 javascript 一个星期或 5 个星期，我正在为一个项目制作一个学校网站。

但是我遇到了这个问题：

在 html 我已经订购了一些 div 这样的：

<div class="circledef">
    <div class="circle">
        <div class="circle-inner" onmouseover="hover()">
            <img src="images/inSite/pasfoto.png">
        </div>

        <div class="popup01">
            test
        </div>
    </div>
</div>

当用户将鼠标悬停在 circle-inner 上时，div 和 class popup01 应该对他们可见。

所以当用户将鼠标悬停在内圈时，这个 javascript 应该运行:

function hover(){
    document.getElementsByClassName("popup01").style.visibility = "visible";
}

在外部 css 文件中，popup01 的样式是：

.popup01 {
    visibility: hidden;
    position: absolute;
    left: -10%;
    top: -10%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: #FFF;
}

当我尝试这个时，它是隐藏的，但是当我将鼠标悬停在它上面时它仍然隐藏。

我尝试在 CSS 中使用显示属性并使用 if 语句使其始终隐藏，直到用户将鼠标悬停在圆圈内。

我在互联网上搜索了这个问题，但找不到类似的东西。

如果您需要更多信息，请告诉我:)。

Answer 1

document.getElementsByClassName returns 一个数组。

你可以这样使用

document.getElementsByClassName("className")[0].style...

Answer 2

document.getElementsByClassName returns 一个数组。所以你应该做

document.getElementsByClassName("popup01")[0].style.visibility = "visible";

也就是说，我建议使用纯 css 解决方案。类似于：

.circle:hover .popup01 {
    visibility: visible;
}

请问为什么用visibility属性而不是display？

Answer 3

在js中document.getElementsByClassNamereturn节点集合http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

function hover(){
    document.getElementsByClassName("popup01")[0].style.visibility = "visible";
}

.popup01 {
    visibility: hidden;
    position: absolute;
    left: -10%;
    top: -10%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: red;
}

<div class="circledef">
    <div class="circle">
        <div class="circle-inner" onmouseover="hover()">
            <img src="images/inSite/pasfoto.png">
        </div>

        <div class="popup01">
            test
        </div>
    </div>
</div>

Answer 4

很有可能，您的 javascript 函数无法正常工作并且存在错误。请在您的浏览器中打开 dev console，让我们知道您遇到了哪个错误。

此外，我建议您在开发时将 dev console 放在眼前，这是一种很好的做法。它肯定会节省您的时间，并有助于更快地发现任何问题的根源。

无论如何，你可以试试我对悬停功能的修正。我认为这可能会有所帮助。

function hover(){
  document.getElementsByClassName("popup01")[0].style.visibility = "visible";
}

此外，看看 React 或 angular 或至少 jquery。

javascript 脚本没有 show/hide 特定的 div 元素

javascript script doesnt show/hide a specific div element

javascript

html

css

onmouseover