Mouse hover picture creates a border effect implementation

Html

The width of the picture must be defined

xml/html code to copy content to clipboard

　　

　　

　　

　　

Css

CSS code copy content to clipboard

. con {

margin:50px;

position:relative;

}

. border {

Position:absolute;

top:0;

left:0;

rightright:0;

bottombottom:0;

}

. con:hover. Border {

border:5px solid #000;

}

Dashed

Add in CSS

CSS code copy content to clipboard

　　

Solid line

Add in CSS

CSS code copy content to clipboard

　　

Js

Remember to introduce jquery files first

JavaScript code copy content to clipboard

$ (function () {

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

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

$ ('. Con '). Width (w);//Set the thickness of the outer wrapping layer of the picture, or you can set it directly in the CSS

$ ('. Con '). Height (h);//Set the image of the outer wrapping layer, can also be set directly in the CSS

$ ('. Border '). Width (w-10);//Set the border layer widths, subtract the border width and multiply by 2

$ ('. Border '). Height (h-10);//Set the height of the border layer, subtract the border width and multiply by 2

});

Demo