javascript - 我如何使用 css 中的可见性属性使我的子菜单出现和重新出现？

Question

我为一个 div 创建了一个子菜单，当 div 悬停在上面时会显示该子菜单。但是子菜单仍然存在，我希望它在光标从 div 中移除时消失。我已经决定使用 css 属性“visibility”但不完全确定什么最适合它，我如何使用 css 中的 visibility 属性使子菜单出现和重新出现？

这是 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";
    }

这是 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;
}

希望有人能帮忙!!

};

Answer 1

你试过display:none;当用户不再将鼠标悬停在 div 上时？