关于layui的小笔记

1.图片鼠标滑过更换

今天写了一个layui的垂直导航部分代码如下，

<li class="layui-nav-item">
 <a class="left_text" href="javascript:;">
  <img class="left_img2" src="./images/u121.png">
  <img class="left_img2" src="./images/u121_mouseOver.png">
 </a>
</li>

css样式
调整两个图片位置，然两个图片堆叠，第二个图片设置样式，之前隐藏，鼠标滑过之后取消隐藏

.layui-nav-item img:nth-child(1){}
.layui-nav-item img:nth-child(2){display: none;}
.layui-nav-item:hover img:nth-child(2){display:block;}

2.layui垂直导航的下拉导航闪一下不显示

如，超链接中要加入

href="javascript:;"
每个都要加入，就可以正常显示了

<li class="layui-nav-item">
  <a class="left_text" href="javascript:;">
   <img class="left_img2" src="./images/u46.png">111111</a>
        <dl class="layui-nav-child">
            <dd><a class="left_text" href="javascript:;">2222222</a></dd>
            <dd><a class="left_text" href="javascript:;">3333333</a></dd>
        </dl>
</li>

如图，有的时候自己根据模板改改就会忽略这个问题，导致不能展开