鼠标悬停图片产生边框的效果实现
2021-05-08 21:11:20 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邮箱联系删除。
网站建设 IT知识 IT知识教程 鼠标悬停图片产生边框的效果实现 
最新文章
热门文章
猜你喜欢
