javascript 脚本不显示/隐藏特定的 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 上时，类 popup01 的 div 应该对他们可见。

所以当用户将鼠标悬停在内圈时，这个 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 中使用 display 属性并使用 if 语句让它始终隐藏，直到用户将鼠标悬停在 circle-inner 上。

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

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

Answer 1

在js document.getElementsByClassName 中返回一个节点集合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>