当前位置:  首页  >  前端开发  >  Jquery

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

要实现多个li实现的边框显示,但给li设定一个border:1px#fffsolid后,发现有以下问题.两个相邻的li放在一起,就会显示边框宽度为2px的问题.
 
 
 《script》
 演示代码
 
 
  • 首页
  •  
  • 互联网
  •  
  • 热点
  •  
  • 国内
  •  
  • 国际
  •  
  • 军事
  •  
  • 财经
  •  
  • 体育
  •  
  • 娱乐
  •  
  • 女人
  •  
  • 科技
  •  
  • 房产
  •  
  • 汽车
  •  
  • 社会
  •  
  • 游戏
  •  
  • 教育
  •  
  • 图片
  •  
  • 人物
  •   
    《script》
    $(function(){
     $(".box li").mouseenter(function(){
     $(this).toggleClass("current");
     }).mouseleave(function(){
     $(this).toggleClass("current");
     })
    })
    《script》
     

     

     

     

    实现原理:

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

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

     

    吐了个 "CAO" !
    扫码关注 PHP1 官方微信号
    PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有