刚看的js，自己敲得时候就是不知道怎么回事 求解答啊。。

[_BookFriend]

<title>无标题文档</title>
<script>

document.getElementById("link").onmouseclick = show;
document.getElementById("link").onmouseout = hide;
alert('欢迎光临本界面！！');
function show(){
alert(1);
}

function show(){
document.getElementById("ul1").style.onmouseover = 'block';
document.getElementById("link").style.background = 'yellow';
}
function hide(){
document.getElementById('ul1').style.display = 'none';
document.getElementById("link").style.background = 'yellow';
}
</script>
<style type="text/css">
.lis {
width:80px;
height:30px;
border:1px solid #000000;
position:relative;
width:100px;
list-style:none;
}
.lis a {
display:block;
line-height:30px;
text-align:center;
text-decoration:none;
}
ul ul {
margin:0px;
padding:0px;
border:1px solid #000000;
width:100px;
left:-1px;
top:30px;
background:#FFFF66;
visibility:hidden;
}
ul ul li {
text-align:center;
line-height:20px;
list-style:none;
width:40px;
}
</style>
</head>
<body>
<div>
<ul>
<li class="lis"> <a href="#" id="link">choose one</a></li>
<ul>
<li>dear</li>
<li>darling</li>
<li>sweetheart</li>
</ul>
</ul>
</div>
</body>
</html>

[豪情]

首先代码放在window.onload里边，要不然会报错。报错的原因就是，html必须运行在前面，js必须运行在后边，而window.onload就是让js运行在html的后边。 然后没有：onmouseclick，只有onmouseover. 然后事件只能绑定给对象，不能当属性来赋值，根据上下文这地方应该是display document.getElementById("ul1").style.onmouseover 然后函数的名字2个最好不要相同，否则后面的一个会覆盖掉前面的一个，除非你有意这样的处理。 // function show(){ // alert(1); // } function show(){ document.getElementById("ul1").style.display = 'block'; document.getElementById("link").style.background = 'yellow'; } 然后给新人的建议，不管怎么样，坚持是最主要的，进步每天都有的，持之以恒才能走得更远。 最后修改的代码分享一下，仅供参考：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>无标题文档</title>
    <script>
        window.onload = function(){
            document.getElementById("link").onmouseover = show;
            document.getElementById("link").onmouseout = hide;
            alert('欢迎光临本界面！！');
//            function show(){
//                alert(1);
//            }

            function show(){
                document.getElementById("ul1").style.display = 'block';
                document.getElementById("link").style.background = 'yellow';
            }
            function hide(){
                document.getElementById('ul1').style.display = 'none';
                document.getElementById("link").style.background = 'red';
            }
        }
    </script>
    <style type="text/css">
        .lis{
            width:80px;
            height:30px;
            border:1px solid #000000;
            position:relative;
            width:100px;
            list-style:none;
        }
        .lis a{
            display:block;
            line-height:30px;
            text-align:center;
            text-decoration:none;
        }
        ul ul{
            margin:0px;
            padding:0px;
            border:1px solid #000000;
            width:100px;
            left:-1px;
            top:30px;
            background:#FFFF66;
            visibility:hidden;
        }
        ul ul li{
            text-align:center;
            line-height:20px;
            list-style:none;
            width:40px;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li class="lis"><a href="#" id="link">choose one</a></li>
        <ul id="ul1">
            <li>dear</li>
            <li>darling</li>
            <li>sweetheart</li>
        </ul>
    </ul>
</div>
</body>
</html>