实在不晓得为什么错了,鼠标经过,边框有反应,但是不能运行:display:block;关键的CSS代码和JS在靠近第一个body标签旁边

来源:3-1 JS实现特效

慕设计5355172

2016-09-18 10:48

  <script type="text/javascript">

    window.onload=function(){

      var Lis=document.getElementsByTagName("li");

      for(var i=0;i<Lis.length;i++){

        Lis[i].onmouseover=function(){

          this.className="lihover";

        }

        Lis[i].onmouseout=function(){

          this.className="";

        }

      }

    }

  </script>

CSS:

    

    .nav_content .lihover {//鼠标移动到上面,应用的样式

      background-image: none;

      border:2px solid #DDD;

      border-right: 0;

      box-shadow: 0 0 8px #DDD;

      -moz-box-shadow:0 0 8px #DDD;

      -webkit-box-shadow:0 0 8px #DDD;

    }

    .nav_content .lihover .submenu{//悬浮层

         display: block;

    }

    .nav_content .lihover span{//白色小方框

      height:31px;

      width:10px;

      background: #FFF; 

      display: inline-block;

      z-index: 20;

      float: right;

      position: relative;

    }


写回答 关注

1回答

  • 林x盖0
    2016-09-18 22:06:04

    不太懂你的意思?什么叫边框有反应,但是不能运行...

    边框有反应是因为    1.设置了鼠标滑过li标签的样式有了边框和去掉了背景图片,你的样式没有错

                                   2.span设置成一个白色小方框,这里height建议改成30px,width改成20px

    你的JS代码也没有错,那有可能是悬浮层的类名没有写对

商城分类导航效果

两种方法实现分类导航,同时扩展讲解其它商城分类导航的制作方法

63734 学习 · 315 问题

查看课程

相似问题