How can i use the visibility attribute in css to make my submenu appear and reappear?


Tags: javascript,css,visibility,mouseover,submenu

Problem :

i have created a submenu for a div that will show when the div is hovered over. However the submenu sticks and i want it to disappear when the cursor is removed from the div. I've decided to use the css attribute "visibility" but not entirely sure what would work best for it, How can i use the visibility attribute in css to make the submenu appear and reappear ?

Heres the Javascript(DOM):

var creatbtndiv = document.createElement("div");
var creatbtn = document.createElement("button");
creatbtn.innerHTML = "Click Me";
var creatlbl = document.createElement("label");
creatlbl.innerHTML = "Hover Over Me ";

creatbtndiv.appendChild(creatlbl);
creatbtndiv.appendChild(creatbtn);

document.body.appendChild(creatbtndiv);



var list = function () {
    var creatDiv = document.createElement("div");
    creatDiv.id = "submenudiv";
    creatDiv.className = "submenudiv";

    var creatul = document.createElement("ul");
    for (index = 0; index < 5; ++index) {
        li = document.createElement("li");
        li.className = "list";
        li.innerHTML = "Submenu" + index;
        creatul.appendChild(li);
    }

    creatDiv.appendChild(creatul);
    document.body.appendChild(creatDiv);

    /*creatDiv.onmouseout = function(){
    //var confirm = confirm("the mouse is out");
    this.parentNode.removeChild(this);
    };*/


};
//If the cursor hovers over the label, activate this function//


creatlbl.onmouseover = function () {
    var alert = confirm("yes master");
    list();
    if (creatlbl.onmouseover === true) {
        creatDiv.className = "visible";
    } else {
        creatDiv.className = "hidden";
    }

Heres the CSS:

label {
    background-color: red;
    padding:5px;
}
ul {
    margin:0;
    padding:5px;
    background-color:#A1CF9F;
    display: inline-block;
    list-style-type: none;
    color:#C0C0C0;
    font-size:19px;
    border-radius:5px;
    /*visibility: hidden;
    /*border: 2px dashed green; This lets me know where the div is*/
}
.divContainer {
    text-align:center;
}
table {
    margin:0 auto;
}
.list {
    border: 2px solid #A1CF9F;
    background-color:#F0F5F0;
    padding: 5px;
}
.list:hover {
    background-color: blue;
    color:white;
}

.visible {
    visibility: visible;
}
.hidden {
    visibility: hidden;
}

Hope anyone can help !!

};



Solution :

Have you tried display:none; for when the user is no longer hovering over the div?


    CSS Howto..

    show No-Overlay (transparent background) when using backdrop:“static” in bootstrap modal

    show div and execute CSS animation in separate div on “li hover”

    How to set stylesheet programmatically in an ASP.NET MVC 2 project?

    how to apply CSS styles in current document recieved from AJAX request?

    How to make emails responsive?

    How to use conditional CSS for IE browser in drupal6?

    how to set base_url() inside css file using codeigniter, to access background_image_url inside css file?

    How to transform a production to LL(1) for a list separated by a semicolon?

    How to include a font .ttf using CSS?

    How to move the icon / button outside the textbox x-webkit-speech?

    Speechbubble tooltip in CSS - how to move the arrow

    How to not repeat a CSS background gradient

    css selector question, how to change font colover of parent li when child ul is focused

    How to position CSS Ribbon to go over one table cell

    How to centralise a button div

    CSS triangle over a div using :before and :after - weird offset, how to fix?

    How to avoid an hover on a menu item to affect the menu items on the right

    Show/hide stuff according to checkboxes using CSS: Why this code won´t work?

    How to create a single space in css between a sentence and a photo on my wordpress site?

    How to give line-break from css, without using
    ?

    How to change the size of the radio button using CSS?

    How to set body attribute in css using angularjs?

    How to remove the “Dotted Border” on clicking?

    how to align divs vertically in html and css?

    How can I avoid div from executing new line if one line is already full?

    How to add animated gif to an image sprite?

    How to center without the
    tag using CSS?

    How to center multiple div elements within a parent div?

    How to crop a rectangular image into a square using CSS?

    How to make an inline-element to occupy space above and below itself within a text using CSS?