How to realize the effect of frame produced by hovering over pictures in web development
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.
