<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* ul {padding-:0;margin-:0;}
        li { list-style:none;}//去掉列表n-one-前面有标识*/
        li{list-style:none;}
        .lis { width:80px;height:30px;border:1px solid #333;position:relative}
        .lis a {display:block;line-height:30px;text-align:center;text-decoration:none;color:#000;background:#f1f1f1;}
         ul ul {padding:0;margin:0;width:140px;border:1px solid
          #333;position:absolute;top:30px;left:-1px;background:#FF9;display:none;}/*加一个display:none;是让它隐藏*/
         ul ul li {text-align:center;line-height:30px;}
    </style>
</head>
<body>
<ul>
    <li id="lis" class="lis">
        <a id="link" href="#">微博</a>
        <ul id="ull" >
            <li>私信</li>
            <li>评论</li>
            <li>@我</li>
        </ul>
    </li>
</ul>
<script>
var a=document.getElementById('lis');
var b=document.getElementById('ull');
var c=document.getElementById('link');

a.onmouseover=show;
a.onmouseout=hide;
function show(){
b.style.display='block';
c.style.background='yellow';
  }
  function hide(){
document.getElementById('ull').style.display='none';
document.getElementById('link').style.background='#f1f1f1';
  }


    /*
    js中如何获取元素：
    1、通过ID名称来获取元素：
     document get element by id 'link'
    2、
    3、
    4、
    事件：鼠标、键盘、系统，表单、自定义事件
    onclick
    onmouseover
    onmouseout
    onmousedown
    onmouseup
    onmousemove
    ......
    添加事件
    元素.onmouseover

    函数；可以理解为-命令，做一些事~~
    function abc(){    //不会主动执行
    ...
    }
    1、直接调用：abc();
    2、事件调用：元素。事件=函数名 oDiv.οnclick=abc;
    3、测试alert(1);带一个确定按钮的警告框
       alert('ok');'ok'字符串
       alert("ok");都可以
       随时写随时查
    4、变量
    var laowang=ocument.getElementById('link')
    */


</script>
</body>
</html>

在这里插入图片描述在这里插入图片描述

版权声明：本文为starmultiple原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/starmultiple/article/details/123384341