web开发中如何实现鼠标悬停图片产生边框的效果

本篇文章给大家分享的是有关web开发中如何实现鼠标悬停图片产生边框的效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

HTML

图片的宽高一定要定义

1. <div class="con">

2. <img src="https://cache.yisu.com/upload/information/20210311/295/12476.jpg" width="360px" height="110px">

3. <div class="border">div>

4. div>

CSS

1. .con {

2. margin: 50px;

3. position: relative;

4. }

5. .border {

6. position: absolute;

7. top: 0;

8. left: 0;

9. rightright: 0;

10. bottombottom: 0;

11. }

12. .con:hover .border {

13. border: 5px solid #000;

14. }

虚线

在css里面添加
CSS

实线

在css里面添加

CSS

JS

记得先引入jQuery文件

JavaScript

1. $(function () {

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

3. var h = $('img').height();

4. $('.con').width(w);//设置图片外部包裹层的宽度，也可以直接在CSS里设置

5. $('.con').height(h);//设置图片外部包裹层的高度，也可以直接在CSS里设置

6. $('.border').width(w - 10);//设置边框层宽度，这里要减去border宽度并乘以2

7. $('.border').height(h - 10);//设置边框层高度，这里要减去border宽度并乘以2

8. });

Demo

以上就是web开发中如何实现鼠标悬停图片产生边框的效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。