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

时间：2021-05-08

HTML

图片的宽高一定要定义

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

    • CSS

    CSS Code复制内容到剪贴板
  • .con{
  • margin:50px;
  • position:relative;
  • }
  • .border{
  • position:absolute;
  • top:0;
  • left:0;
  • rightright:0;
  • bottombottom:0;
  • }
  • .con:hover.border{
  • border:5pxsolid#000;
  • }


    • 虚线

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

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

    • 实线

    在css里面添加

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

    • JS

    记得先引入jQuery文件

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

    • Demo

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章