html侧栏对应表单的提示显示

作者: 信仰1b886
来源: 51数据库
2022-09-21
<html>
<head>
	<title>侧栏对应提示</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.main{
		width: 900px;
		height: auto;
		margin: 0 auto;
		overflow: hidden;
		border:none;
	}
	.leftbd{
		width: 200px;
		height: 800px;
		border:1px solid #990099;
		float: left;
		
	}
	.leftbd2{
		width: 200px;
		height: auto;
		max-height: 700px;
		border:none;
		float: left;
		overflow: hidden;
	}
	.rightbd{
		width: 660px;
		height: 800px;
		border:1px solid #990099;
		margin-left: 20px;
		float: left;
		
	}
	.leftbd ul{
		width: 200px;
		height: auto;
		max-height: 700px;
		overflow: hidden;
		margin-top: 30px;
		display:block;
		float: left;
		overflow-y: scroll;
	}
	.leftbd ul li{
		width: 200px;
		display: block;
		font-size: 16px;
		padding: 15px 0;
		text-align: center;
		background: #eaeaea;
		margin-bottom: **x;
		cursor: pointer;
		list-style-type: none;
	}
	.leftbd ul li:hover{
		background: #009900;
		color: #ffffff;

	}
	.tishi{
		position: absolute;
		width: 200px;
		font-size: 16px;
		padding: 15px 0;
		text-align: center;
		background: #000099;
		color: #990099;
		display: block;
		display: none;
		margin-top: -15px;
		margin-left: 132px;
	}
	</style>
</head>
<body>
	<div >
		<div >
			<div >
			<ul >
				<li ><span >哈哈</span> <span>android</span> </li>
				<li ><span >哈哈2</span><span>c#</span></li>
				<li ><span >哈哈3</span><span>iOS</span></li>
				<li ><span >哈哈4</span><span>jquery</span></li>
				<li ><span >哈哈5</span><span>Javascript</span></li>
				<li ><span >哈哈5</span><span>Javascript</span></li>
				<li ><span >哈哈5</span><span>Javascript</span></li>
				<li ><span >哈哈</span> <span>android</span> </li>
				<li ><span >哈哈2</span><span>c#</span></li>
				<li ><span >哈哈3</span><span>iOS</span></li>
				<li ><span >哈哈4</span><span>jquery</span></li>
				<li ><span >哈哈5</span><span>Javascript</span></li>
				<li ><span >哈哈5</span><span>Javascript</span></li>
				<li ><span >哈哈5</span><span>Javascript</span></li>
				<li ><span >哈哈</span> <span>android</span> </li>
				<li ><span >哈哈2</span><span>c#</span></li>
				<li ><span >哈哈3</span><span>iOS</span></li>
				<li ><span >哈哈4</span><span>jquery</span></li>
				<li ><span >哈哈5</span><span>Javascript</span></li>
				<li ><span >哈哈5</span><span>Javascript</span></li>
				<li ><span >哈哈5</span><span>Javascript</span></li><li ><span >哈哈</span> <span>android</span> </li>
				<li ><span >哈哈2</span><span>c#</span></li>
				<li ><span >哈哈3</span><span>iOS</span></li>
				<li ><span >哈哈4</span><span>jquery</span></li>
				<li ><span >哈哈5</span><span>Javascript</span></li>
				<li ><span >哈哈5</span><span>Javascript</span></li>
				<li ><span >哈哈5</span><span>Javascript</span></li>
			</ul>
			</div>
		</div>
		<div ></div>
	</div>
	<script type="text/javascript" src="http://www.51sjk.com/Upload/Articles/1/0/330/330304_20220921172406775.js"></script>
	<script type="text/javascript">
	$(function() {
		
			var inul=$(".leftul");
			var inli=inul.children();
			var insp;

			inli.hover(function(e){
				$(this).find('.tishi').toggle();
			});


		
	});
	
	</script>
</body>
</html>