鼠标悬停图片产生边框的效果实现_Div+Css教程--HTML5中文学习网

鼠标悬停图片产生边框的效果实现_Div+Css教程

2015-08-18 23:21:29 [小大] 已经帮助：人解决问题

　　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复制内容到剪贴板

　　记得先引入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

（责任编辑：）