jquery实现鼠标移到层上面实现边框加色效果

要实现多个li实现的边框显示,但给li设定一个border:1px #fff solid后,发现有以下问题.两个相邻的li放在一起,就会显示边框宽度为2px的问题.

jquery-demo-mouse-0



 
 
 
 演示代码

 



 

实现原理:

默认情况下,多个li的边框都发生重复问题.就是相信的边框会显示两个边线.而通过 margin-left:-1可以实现左侧重复边线只显示一个,对于上面的重复利用margin-top:-1来解决.(当然也可以利用margin-right:-1px;margin-bottom:-1px来实现)

主要用的是一句样式 position: relative 这句,没有这句的话,会出现问题.

jquery-demo-mouse

演示地址:http://runjs.cn/detail/ybhmpemt