javascript script doesnt show/hide a specific div element

Question

Im learning css, html and javascript for a week or 5 and I'm making a site for school for a project.

But I bumped against this problem:

In the html i have ordered some divs like this:

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

when the user hovers over circle-inner, the div with class popup01 should become visible to them.

So when the user hovers over inner-circle this javascript should run:

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

In the external css file the style for popup01 is:

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

When I try this, it is hidden but when i hover over it stays hidden.

I have tried using the display attribute in CSS and using an if statement to have it always hidden until the user hovers over circle-inner.

I have searched the internet for this issue but couldn't find something similar.

If you need more information just let me know :).

Answer 1

In js document.getElementsByClassName return a collection of nodes 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>