CODEWITHSUNDEEP
javascripthtmldom-events
user1315305
user1315305

Reputation: 1389

How to change visibility of div's child elements in "onmouseover" function

In my website I would like to change some style properties of a div when user moves the mouse over it. I would also like to hide/show some child elements of this div. I don't have any experience with JavaScript, I'm experimenting with some code I found in the Internet.

Let's say my div looks like that:

<div class="Advertisement">
    <h2 class="Title">title</h2>
</div>

And I want to hide this h2 element after moving the mouse over the div. My JS Script looks like this:

window.onload = function() {
    var lis = document.getElementsByClassName("Advertisement");
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function() {
            this.style.backgroundColor = "green";
            this.style.width = "800px";
            var children = lis[i].childNodes.getElementsByClassName("Title");
            for (var j = 0; j < children.length; j++) {
                children[j].onmouseover = function() {
                    this.style.visibility = "hidden";
                };
            }
        };
    }
};​

Changing of size and background color works fine, but the "h2" element doesn't disappear. What did I do wrong?

Upvotes: 0

Views: 2077

Answers (2)

insertusernamehere
insertusernamehere

Reputation: 23570

Actually you don't need JavaScript for that task. Why not use plain HTML/CSS?

Try this:

<style>
    div.advertisement:hover > h2, div.advertisement:focus > h2 {
        color:      red;
    }
    div.advertisement > h3 {
        display:    none;
    }
    div.advertisement:hover > h3, div.advertisement:focus > h3 {
        display:    block;
    }
</style>

<div class="advertisement" tabindex="-1">
    <h2>title</h2>
    <h3>hidden text</h3>
</div>

This one actually shows something, but of course it works vice versa with hiding your h2.

Extension by RyanB

This is similiar to an answer I'd give. I would say the hidden text should be a <p>, <span> or a <div> versus a <h3> to have better semantics. Also add tabindex="-1" to the div if it is that important. Adding tabindex="-1" allows the <div> to receive focus.

Upvotes: 1

user1432124
user1432124

Reputation:

lis[i] is undefined here and no need of childnode So,instead of this

var children = lis[i].childNodes.getElementsByClassName("Title");

Write

 var children = this.getElementsByClassName("Title");

Upvotes: 0

Related Questions