首页 > 开发 > CSS > 正文

鼠标悬停图片产生边框的效果实现

2019-10-31 09:21:31
字体:
来源:转载
供稿:网友

   HTML

  图片的宽高一定要定义

  XML/HTML Code复制内容到剪贴板

  

 

  鼠标悬停图片产生边框的效果实现  电脑高手

  

 

 

  

 

  CSS

  CSS Code复制内容到剪贴板

  .con {

  margin: 50px;

  position: relative;

  }

  .border {

  position: absolute;

  top: 0;

  left: 0;

  rightright: 0;

  bottombottom: 0;

  }

  .con:hover .border {

  border: 5px solid #000;

  }

  虚线

  在css里面添加

  CSS Code复制内容到剪贴板

  

  实线

  在css里面添加

  CSS Code复制内容到剪贴板

  

  JS

  记得先引入jQuery文件

  JavaScript Code复制内容到剪贴板

  $(function () {

  var w = $('img').width();

  var h = $('img').height();

  $('.con').width(w);//设置图片外部包裹层的宽度,也可以直接在CSS里设置

  $('.con').height(h);//设置图片外部包裹层的高度,也可以直接在CSS里设置

  $('.border').width(w - 10);//设置边框层宽度,这里要减去border宽度并乘以2

  $('.border').height(h - 10);//设置边框层高度,这里要减去border宽度并乘以2

  });

  Demo

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表