css样式控制鼠标滑过显示

Posted 放荡不羁的春天

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css样式控制鼠标滑过显示相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
	*{margin: 0; padding: 0;font-family:arial;}
	.messdiv{position: relative;width: 150px; height: auto;font-size: 14px;margin: 20px 0 0 20px;}
	.selecshow{display: none;position: absolute;border: 1px solid #ccc; box-shadow: 0px 8px 16px 0px #666;padding: 10px;min-width: 140px;line-height: 30px;}
	.messdiv:hover .selecshow{display: block;}
	</style>
	<body>
		<div class="messdiv">
			<span>鼠标划我显示下拉信息</span>
			<div class="selecshow">
				<p>下拉信息1</p>
				<p>下拉信息2</p>
			</div>
		</div>
	</body>
</html>

  

以上是关于css样式控制鼠标滑过显示的主要内容,如果未能解决你的问题,请参考以下文章

HTML+css 鼠标滑过二级导航时想保留一级导航的滑过 求大神解答

初学css,怎样在li标签上实现鼠标滑过显示图片

jQuery鼠标滑过横向时间轴样式

js实现鼠标滑过显示二级菜单

css+div html 鼠标滑过div里的内容变样式?

Qt 样式表鼠标滑过按钮更改Text文本颜色