Shulou(Shulou.com)06/03 Report--

What this article shares with you is about how to achieve the border effect of mouse over pictures in web development. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

HTML

The width and height of the picture must be defined.

CSS

.con {

Margin: 50px

Position: relative

}

.border {

Position: absolute

Top: 0

Left: 0

Rightright: 0

Bottombottom: 0

}

.con: hover .border {

Border: 5px solid # 000

}

Dotted line

Add to css

CSS

Td {border-bottom:1px dashed # 000000;}

Solid line

Add to css

CSS

Td {border:1px solid black;}

JS

Remember to introduce the jQuery file first

JavaScript

$(function () {)

Var w = $('img') .width ()

Var h = $('img') .height ()

$('.con') .width (w); / / set the width of the outer wrapping layer of the image, or you can set it directly in CSS

$('.con') .height (h); / / set the height of the outer wrapping layer of the image, or you can set it directly in CSS

$('.border') .width (w-10); / / sets the width of the border layer, where the border width is subtracted and multiplied by 2

$('.border') .height (h-10); / / sets the height of the border layer, where the border width is subtracted and multiplied by 2

});

Demo

The above is how to achieve the border effect of mouse-over pictures in web development. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.