html侧栏对应表单的提示显示代码,Css代码库,德仔网

代码语言
代码分类
【Css】 html侧栏对应表单的提示显示
作者:sjwc / 发布于2015/3/23/ 1024

	<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: 3px;
	 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 class="main">
	 <div class="leftbd">
	 <div class="leftbd2">
	 <ul class="leftul">
	 <li class="fd"><span class="tishi">哈哈</span> <span>android</span> </li>
	 <li class="fd"><span class="tishi">哈哈2</span><span>c#</span></li>
	 <li class="fd"><span class="tishi">哈哈3</span><span>iOS</span></li>
	 <li class="fd"><span class="tishi">哈哈4</span><span>jquery</span></li>
	 <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
	 <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
	 <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
	 <li class="fd"><span class="tishi">哈哈</span> <span>android</span> </li>
	 <li class="fd"><span class="tishi">哈哈2</span><span>c#</span></li>
	 <li class="fd"><span class="tishi">哈哈3</span><span>iOS</span></li>
	 <li class="fd"><span class="tishi">哈哈4</span><span>jquery</span></li>
	 <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
	 <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
	 <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
	 <li class="fd"><span class="tishi">哈哈</span> <span>android</span> </li>
	 <li class="fd"><span class="tishi">哈哈2</span><span>c#</span></li>
	 <li class="fd"><span class="tishi">哈哈3</span><span>iOS</span></li>
	 <li class="fd"><span class="tishi">哈哈4</span><span>jquery</span></li>
	 <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
	 <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
	 <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li><li class="fd"><span class="tishi">哈哈</span> <span>android</span> </li>
	 <li class="fd"><span class="tishi">哈哈2</span><span>c#</span></li>
	 <li class="fd"><span class="tishi">哈哈3</span><span>iOS</span></li>
	 <li class="fd"><span class="tishi">哈哈4</span><span>jquery</span></li>
	 <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
	 <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
	 <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
	 </ul>
	 </div>
	 </div>
	 <div class="rightbd"></div>
	 </div>
	 <script type="text/javascript" src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.9.1.min.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>
试试其它关键字
　侧栏　
同语言下
可能有用的
sjwc贡献的其它代码(3)