欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > CSS鼠标悬停图片加边框效果
这篇文章主要为大家详细介绍了CSS鼠标悬停图片加边框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

有的时候我们想实现这样的一个功能:CSS鼠标悬停图片加边框效果。如下图:

这是361模板在给做一个小专题《网购任意门》的时候想做的一个效果,代码很简单

一般,我们适用如下CSS代码就可以实现

img:hover{border:1px red solid;}

上述代码的含义:

边框 border:1px  表示宽度1PX;red 表示边框颜色位红色;  solid:表示边框是实线的。

当然,可能有细心的朋友发现,加上以上代码后,鼠标悬浮的时候会发现图片会有少许的漂移,如何解决这个问题呢?

很简单,我们有2个方法实现:

1、修改width和height,这样就会保持图片不偏移。

.demo1 img:hover{width:68px;height:68px;border:1px solid yellow;}

2、给每个img添加border:1px solid transparent;

.demo2 img{border:1px solid transparent;}
.demo2 img:hover{border:1px red solid;}

以上2中方法就能去除鼠标悬浮时出现偏移的现象。具体比较效果查看下面的效果演示。

效果演示

以上就是CSS鼠标悬停图片加边框效果的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: css 鼠标悬停 图片加边框

上一篇PHP中explode()函数详解及实例分析

下一篇CSS实现鼠标滑过图片显示文字介绍的方法

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在