[JavaScript知识库] javascript网页，鼠标移动对框框颜色改变以及下拉框（2）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> javascript网页，鼠标移动对框框颜色改变以及下拉框（2） -> 正文阅读

[JavaScript知识库]javascript网页，鼠标移动对框框颜色改变以及下拉框（2）

<!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>