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

网络
仅仅一月的时间，曾经满眼雪白的棉花地只剩下暗褐色的一片，偶尔星星点点飘几点白色，也暗然无光。人类征服大自然的力量是神奇强大的，这种超乎寻常的功能有时候总让你难以置信。

HTML

图片的宽高一定要定义

XML/HTML Code复制内容到剪贴板
  1. <divclass="con">
  2. <imgsrc="http://www.zjgsq.com/wp-content/uploads/2014/08/jqueryapi.jpg"width="360px"height="110px">
  3. <divclass="border"></div>
  4. </div>

CSS

CSS Code复制内容到剪贴板
  1. .con{
  2. margin:50px;
  3. position:relative;
  4. }
  5. .border{
  6. position:absolute;
  7. top:0;
  8. left:0;
  9. rightright:0;
  10. bottombottom:0;
  11. }
  12. .con:hover.border{
  13. border:5pxsolid#000;
  14. }


虚线

在css里面添加
CSS Code复制内容到剪贴板

  1. <style>
  2. td{border-bottom:1pxdashed#000000;}
  3. </style>

实线

在css里面添加

CSS Code复制内容到剪贴板
  1. <style>
  2. td{border:1pxsolidblack;}
  3. </style>

JS

记得先引入jQuery文件

JavaScript Code复制内容到剪贴板
  1. $(function(){
  2. varw=$('img').width();
  3. varh=$('img').height();
  4. $('.con').width(w);//设置图片外部包裹层的宽度，也可以直接在CSS里设置
  5. $('.con').height(h);//设置图片外部包裹层的高度，也可以直接在CSS里设置
  6. $('.border').width(w-10);//设置边框层宽度，这里要减去border宽度并乘以2
  7. $('.border').height(h-10);//设置边框层高度，这里要减去border宽度并乘以2
  8. });

Demo

本文鼠标悬停图片产生边框的效果如何实现到此结束。站起来，擦干汗水。走下去，生活还要继续。小编再次感谢大家对我们的支持！

您可能有感兴趣的文章
基于CSS 判断鼠标进入的方向
CSS如何实现鼠标移至图片上显示遮罩层效果
html+css+javascript如何实现跟随鼠标移动显示选中效果
如何利用HTML+CSS如何实现跟踪鼠标移动功能
详解CSS如何实现仿Windows10鼠标照亮边框效果