利用css实现:鼠标移动到图片时四周出现阴影效果

使用CSS :hover 伪类可以达到这个效果。

定义和用法

:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示::hover 选择器可用于所有元素,不只是链接。

提示::link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接。

注释:在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。

实例效果

以本站文章内图片为实例,按F12审查当前网页元素,找到文章图片所在的Div,为这个Div添加以下Css代码:

.wp-block-image img:hover{
	box-shadow: 6px 6px 6px 8px rgba(0,0,0,0.3);}

达到以下效果:

0
魔效源码站广告位招租

评论0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
没有账号? 忘记密码?
嘿,让我来帮您!