DIV+CSS中鼠标移到窗口显示下面部分。
3个回答
展开全部
兄弟，如楼上各位所说，要用javascript 实现好一些，
只用DIV+CSS的话也可以，把我写的代码复制过去看看吧，希望可以给你一个思路：
----------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
html { color: #333; background: #FFF; }
body, div, dl, dt, dd, ul, ol, li, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
em, strong { font-style: normal; font-weight: normal; }
ul, li { list-style: none; }
.clearfix:after { content:'\0020'; display:block; height:0; clear:both; }
.clearfix { *zoom:1;}
.list { width:900px; margin:100px auto; font-size:12px; }
.list li { position:relative; float:left; width:180px; height:200px; margin: 5px; }
.list a { display: block; width:178px; height:198px; border:solid 1px #666; background:#6C9; overflow:hidden; color:#666; text-decoration:none; }
.list a:hover { position:absolute; overflow:visible; border-color:#F00; background:#ccc; z-index:9; min-height:198px; height:auto !important; height:198px; color:#F30; }
</style>
</head>
<body>
<ul class="list clearfix">
<li> <a href="#">
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
</a> </li>
<li> <a href="#">
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
</a> </li>
<li> <a href="#">
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
</a> </li>
<li> <a href="#">
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
</a> </li>
</ul>
</body>
</html>
只用DIV+CSS的话也可以，把我写的代码复制过去看看吧，希望可以给你一个思路：
----------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
html { color: #333; background: #FFF; }
body, div, dl, dt, dd, ul, ol, li, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
em, strong { font-style: normal; font-weight: normal; }
ul, li { list-style: none; }
.clearfix:after { content:'\0020'; display:block; height:0; clear:both; }
.clearfix { *zoom:1;}
.list { width:900px; margin:100px auto; font-size:12px; }
.list li { position:relative; float:left; width:180px; height:200px; margin: 5px; }
.list a { display: block; width:178px; height:198px; border:solid 1px #666; background:#6C9; overflow:hidden; color:#666; text-decoration:none; }
.list a:hover { position:absolute; overflow:visible; border-color:#F00; background:#ccc; z-index:9; min-height:198px; height:auto !important; height:198px; color:#F30; }
</style>
</head>
<body>
<ul class="list clearfix">
<li> <a href="#">
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
</a> </li>
<li> <a href="#">
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
</a> </li>
<li> <a href="#">
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
</a> </li>
<li> <a href="#">
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
<p>text,text,text</p>
</a> </li>
</ul>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
TableDI
2024-07-18 广告
仅需3步!不写公式自动完成Excel vlookup表格匹配!Excel在线免，vlookup工具,点击62步自动完成表格匹配,无需手写公式,免费使用!...
点击进入详情页
本回答由TableDI提供
展开全部
<script type="text/javascript">
function show_div(){
document.getElementById('Below_new').style.display='block';
}
function hid_div(){
document.getElementById('Below_new').style.display='none';
}
</script>
<div onmousemove="show_div()" onmouseout="hid_div()">
below_new 是你要显示的层ID
function show_div(){
document.getElementById('Below_new').style.display='block';
}
function hid_div(){
document.getElementById('Below_new').style.display='none';
}
</script>
<div onmousemove="show_div()" onmouseout="hid_div()">
below_new 是你要显示的层ID
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用js代码就可以啦
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
