您的位置：首页 > Web前端 > HTML

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

2015-03-19 14:09 441 查看 
<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航