css怎么设置鼠标经过元素显示图片
程序员文章站
2022-03-21 20:09:18
...
在css中,可以使用“:hover”选择器来实现鼠标经过元素显示图片效果,“:hover”选择器用于规定鼠标指针浮动元素上时添加的特殊样式,语法格式“元素:hover{background: url(图片地址);}”。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
在css中,可以使用“:hover”选择器来实现鼠标经过元素显示图片效果。
:hover选择器指定在鼠标移到元素上时添加的特殊样式。
下面通过代码示例来具体看看:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div{ width: 400px; height: 300px; border: 1px solid red; } div:hover{ background: url(img/1.jpg); background-size: 400px; } </style> </head> <body> <div>将鼠标移动到div盒子中:</div> </body> </html>
效果图:
(学习视频分享:css视频教程)
以上就是css怎么设置鼠标经过元素显示图片的详细内容,更多请关注其它相关文章!
推荐阅读
-
纯css3实现鼠标经过图片显示描述的动画效果
-
鼠标经过切换不同的显示内容怎么做呢?_html/css_WEB-ITnose
-
鼠标经过图片放大,离开变回原形,在谷歌浏览器里面显示异常_html/css_WEB-ITnose
-
30款css3实现的鼠标经过图片显示描述特效_html/css_WEB-ITnose
-
30款css3实现的鼠标经过图片显示描述特效_html/css_WEB-ITnose
-
鼠标经过切换不同的显示内容怎么做呢?_html/css_WEB-ITnose
-
在一个td内要显示的内容超过了td的宽度,要使鼠标放在省略内容上即显示全部内容,要怎么设置??_html/css_WEB-ITnose
-
css鼠标指针怎么设置为图片样式
-
纯css3实现鼠标经过图片显示描述的动画效果
-
织梦无法放在二级目录 放在二级目录之后 所有的图片 还有css文件全都不显示了 哪位高手知道怎么回事 咋设置