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 :).

How many times the HTML block code that you have regarded is repeated in your HTML source? Another thing, `getElementsByClassName` returns an array, so you have to use the index of the specified element. The last note, using `onmouseover` should be used with another `onmouseout`. — SaidbakR, Oct 15 '16 at 20:46

score 1 · Accepted Answer · answered Oct 15 '16 at 20:49

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>

thanks guys, I didn't know it would return a array. by adding the [0] after getElementByClassName() fixed it. — kaymanv, Oct 16 '16 at 10:55

score 1 · Answer 2 · answered Oct 15 '16 at 21:12

1

Most likely, your javascript function doesn't work and has a bug. Please, open dev console in your browser and let us know which error you've got.

Moreover, I'd recommend you as a good practice, keep dev console in front of your eyes while you're developing. It will definitely save you time and help to discover root of any issue much faster.

In any way, you can try my corrections for hover function. I think it may helps.

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

Furthermore, take a look on react or angular or at least on jquery.

answered Oct 15 '16 at 21:12

Valery Kamensky

11
1

thanks guys, I didn't know it would return a array. by adding the [0] after getElementByClassName() fixed it. – kaymanv Oct 16 '16 at 10:54
I will try the dev console, it seems very usefull indeed. I will also take a look at angular and jquery. thank you for your response and tips – kaymanv Oct 16 '16 at 10:57

score 0 · Answer 3 · answered Oct 15 '16 at 20:48

0

document.getElementsByClassName returns an array.

You can use like this

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

answered Oct 15 '16 at 20:48

selami

2,478
1
21
25

hector22x · Answer 4 · 2016-10-15T20:56:30.350

0

document.getElementsByClassName returns an array. So you should do

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

That said, I would suggest going with a pure css solution. Something like:

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

May I ask why did you use visibility property instead of display ?

edited Oct 15 '16 at 20:56

answered Oct 15 '16 at 20:49

hector22x

104
6

I used the display property before that but it didnt work, so i thought the visibility property would work instead, but no success. Is there a preference for using display instead of visibility? – kaymanv Oct 16 '16 at 10:58
They work different. While `display: none` completely hides the element in the dom, setting `visibility: hidden` just makes the element invisible, but it will use the space it needs to be displayed. so, for example, if you have 3 blocks, with 30px height each one, one over the other then: 1. using `display: none` in the second block, makes the 3rd one move up to the place where the second was. 2. Using `visibility: hidden` in the second, will leave an empty space between the first and the third, the same space that the second block was using. – hector22x Oct 17 '16 at 09:15
@kaymanv http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden/273076#273076 There're more details about it – hector22x Oct 17 '16 at 09:23

javascript script doesnt show/hide a specific div element

4 Answers4