Question

我知道关于jQuery和所有内容的所有令人敬畏的......但是我仍然对javascript非常弱，并且觉得要搞乱它并且更加自信..

我正在努力实现的目标：

onmouseout sub.style =“display：none”; //我的方式没有用，所以我用了一个方法，所以我用了document.onclick（暂时） menuOver.onmouseover //添加简单的css或js效果

CSS

#menuOver
{
    position: absolute;
    margin: 0 auto;
    height: 40px;
    width:110px;
    color:white;
    z-index: 10;
}

#sub
{
    display: none;
    position: absolute;
    top: 80px;
    font-family: verdana;
    margin: 0 auto;
    height: 190px;
    width:110px;
    text-align: center;
    -moz-transition-duration: .25s;
    -webkit-transition-duration: .25s;
    -o-transition-duration: .25s;
    -ms-transition-duration: .25s;
    transition-duration: .25s;

    /* border: solid #444 1px; */
}

的Javascript

document.onreadystatechange = function()
{
    if(document.readyState == "complete")
    {



        var sub                 = document.getElementById("sub");
        var menuOver            = document.getElementById("menuOver");
        var container           = document.getElementById("container"); //for later use

        menuOver.onmouseover = function()
        {
            menuOver.style       = "display:none";
            sub.style            =   "display:block;top:40px;";
            sub.innerHTML        =  "<a href='#'>profile</a></span>";
            sub.innerHTML       += "<br />";
            sub.innerHTML       += "<span><a href='?cmd=logout'>logout</a></span>";
            //alert("menuOver"); //Debugging Purpose 
        }

        document.onclick = function()
        {
            //hide menu
            sub.style = "display:none";

            //activate Hover Menu
            menuOver.style   = "display:block";;

            //alert("Outside"); //Debugging Purpose 
        }   
    }
}

HTML

<div id="holder" class="pull-right"><!-- this is a bootstrap class -->
    <div id="menuOver"></div>
    <div id="sub"></div>
</div>

我只是在这里编码学习 ... 任何建议和/或教程让我更熟悉整个锻炼非常感谢..

javascript + css基本动画+功能

0 个答案: