css选择器hover能实现什么效果?用法是什么？-群英

css选择器hover能实现什么效果?用法是什么？

PHP中文网发表于 2021-09-13 16:23 次浏览

css选择器hover能实现什么效果?我们可以使用：hover选择器来做鼠标经过元素显示图片的效果，这个效果还是比较使用的，在商城网站、论坛网站、社交网站等等都可以应用，那么具体要怎样实现呢?下面我们来具体了解看看。

在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选择器hover的内容就介绍到这了，大家想要实现鼠标经过元素显示图片的效果，：hover选择器能帮助大家轻松解决，希望本文对大家学习CSS有帮助，想要了解更多CSS的内容，请关注群英网络其它相关文章。

标签：css选择器hover

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：Javascript判断对象是否存在的方法有哪些?

下一篇：css怎么样实现让div并排显示？教你两个方法