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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

最有可能的是，你的javascript函数不起作用并且有bug。请在浏览器中打开dev console，告诉我们您遇到的错误。

此外，我建议你做个好习惯，在你开发的同时将dev console放在眼前。它肯定会节省您的时间，并帮助更快地发现任何问题的根源。

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

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

此外，看看反应或角度或至少在jquery上。

Answer 3

document.getElementsByClassName返回一个数组。

你可以这样使用

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

Answer 4

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

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

那就是说，我建议使用纯css解决方案。类似的东西：

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

我可以问你为什么使用visibility属性代替display？

javascript脚本不显示/隐藏特定的div元素

4 个答案: