下拉框的制作

最新推荐文章于 2021-01-14 18:05:54 发布

s_psycho

最新推荐文章于 2021-01-14 18:05:54 发布

阅读量440

点赞数

本文链接：https://blog.csdn.net/weixin_42413689/article/details/80924249

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        #rong{
            width: 200px;
            height: 140px;
            margin: auto;
            text-align: center;
        }
        #lie{
            width: 200px;
            height: 20px;
        background: yellow;
        position: relative}
        #gedan{
            width: 200px;
            background: pink;
        }
        ul{list-style: none  }
        li{
            width: 200px;
            height: 20px;
            text-align: center;
        }
        #oo{  
            width: 0;
            height: 0;
        border-top: 10px solid black;
        border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        border-bottom: 0px;
        position: absolute;
            top: 10px;
            right: 0px;
        }
    </style>
</head>
<body>
<div id="rong">
    <div id="lie"><p>列表</p>
        <div id="oo"></div>
    </div>
    <div id="gedan" style="display: block">
        <ul>
            <li id="li1">蔡依林</li>
            <li id="li2">蔡依林</li>
            <li id="li3">蔡依林</li>
            <li id="li4">蔡依林</li>
            <li id="li5">蔡依林</li>
            <li id="li6">蔡依林</li>
        </ul>
    </div>
</div>
<script>
  var  P=document.getElementById('gedan');
  var  p=document.getElementById('lie');
     p.onclick=function () {if(P.style.display=='block'){
        P.style.display='none'
    }
    else{
        P.style.display='block'
    }
     };
     var li1=document.getElementById("li1");
  var li2=document.getElementById("li2");
  var li3=document.getElementById("li3");
  var li4=document.getElementById("li4");
  var li5=document.getElementById("li5");
  var li6=document.getElementById("li6");
     li1.onmouseover=function () {
      li1.style.background="white";
         li1.style.textDecoration="underline"
     };
  li2.onmouseover=function () {
      li2.style.background="white";
      li2.style.textDecoration="underline"
  };
  li3.onmouseover=function () {
      li3.style.background="white";
      li3.style.textDecoration="underline"
  };
  li4.onmouseover=function () {
      li4.style.background="white";
      li4.style.textDecoration="underline"
  };
  li5.onmouseover=function () {
      li5.style.background="white";
      li5.style.textDecoration="underline"
  };
  li6.onmouseover=function () {
      li6.style.background="white";
      li6.style.textDecoration="underline"
  };
  li1.onmouseout=function () {
      li1.style.background="pink";
      li1.style.textDecoration="none"
  };
  li2.onmouseout=function () {
      li2.style.background="pink";
      li2.style.textDecoration="none"
  };

  li3.onmouseout=function () {
      li3.style.background="pink";
      li3.style.textDecoration="none"
  };
  li4.onmouseout=function () {
      li4.style.background="pink";
      li4.style.textDecoration="none"
  };
  li5.onmouseout=function () {
      li5.style.background="pink";
      li5.style.textDecoration="none"
  };

  li6.onmouseout=function () {
      li6.style.background="pink";
      li6.style.textDecoration="none"
  };
</script>
</body>
</html>

s_psycho

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉框的制作

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{ margin:0;
复制链接

扫一扫