好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

css怎么设置鼠标经过元素显示图片

在css中,可以使用“:hover”选择器来实现鼠标经过元素显示图片效果,“:hover”选择器用于规定 鼠标指针 浮动元素上时添加的特殊样式,语法格式“元素:hover{background: url(图片地址);}”。

本教程操作环境:windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。

在css中,可以使用“:hover”选择器来实现鼠标经过元素显示图片效果。

:hover选择器指定在鼠标移到元素上时添加的特殊样式。

下面通过代码示例来具体看看:

<!DOCTY PE  html>
<html>
	<head>
		< ;m eta charset="utf-8">
		<style type="text/css">
			div{
				width: 400px;
				h ei ght: 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怎么设置鼠标经过元素显示图片的详细内容,更多请关注其它相关 文章 !

总结

以上是 为你收集整理的 css怎么设置鼠标经过元素显示图片 全部内容,希望文章能够帮你解决 css怎么设置鼠标经过元素显示图片 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于css怎么设置鼠标经过元素显示图片的详细内容...

  阅读:31次