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>
如图,有的时候自己根据模板改改就会忽略这个问题,导致不能展开