妙味JS笔记－菜单栏

最新推荐文章于 2024-07-16 16:43:05 发布

精致的狗狗女孩

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量556

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u013220174/article/details/47612865

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

妙味热身运动

效果图如下：

这里写图片描述

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
    ul {padding: 0;margin: 0}
    li {list-style: none;}
    .lis{position: relative;width:30px;}
    .lis a {display: block;line-height: 30px;border: 1px #000 solid;text-decoration: none;width: 80px;background: #eee;color: #000;text-align: center;}
    ul ul{width: 140px;text-align: center;border: 1px solid #000;position: absolute;top: 31px;left:0px;display: none;}
    ul ul li{line-height: 30px;background: #ff0}
</style>

<!-- 希望把某个元素移出视线
    1、display:none  显示为无
    2、visibility:hidden  隐藏
    3、width,height
    4、透明度
    5、left\top
    6、拿一个白色的div盖住
    7、margin负值

 -->

</head>

<body>
    <ul>
        <li id="lis" class="lis">
            <a id='weibo' href="#">微博</a>
            <ul id="ul">
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
    </ul>
     <script>
 var a =  document.getElementById('lis');

 a.onmouseover = function show(){

    document.getElementById('ul').style.display='block';
    document.getElementById('weibo').style.background='yellow';
 };

 a.onmouseout = function hide(){

    document.getElementById('ul').style.display='none';
    document.getElementById('weibo').style.background='#eee';
 };


// JS中如何获取元素
// document.getElementById
// 事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件
// 
// onclick
// onmouseover
// onmouseout
// onmousedown
// onmouseup
// onmousemove
// 
// 如何添加事件：
//  元素.onmouseover
//  
// 函数：可以理解为命令，做一些事儿
//  function abc(){ //肯定不会主动执行的
//      ……
//  }
//  1、直接调用：abc();
//  2、事件调用：元素.事件 ＝ 函数名； //不加括号
//  
//  测试：alert();
// 
 </script>
</body>
</html>

精致的狗狗女孩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
妙味JS笔记－菜单栏

妙味热身运动效果图如下：<!doctype html><html><head><meta charset="UTF-8"><title>Untitled Document</title><style type="text/css"> ul {padding: 0;margin: 0} li {list-style: none;} .lis{position: rel
复制链接

扫一扫