css 为什么图片会覆盖文字的显示
图片一旦下滑以后图片就会被遮住了如何让文字不被图片遮住<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://...
图片一旦下滑以后图片就会被遮住了 如何让文字不被图片遮住
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").mouseover(function(){
var id= $(this).attr("id");
var i=id.replace("A", "B");
$("#"+i).animate({top:"0px"},400);
});
$("a").mouseout(function(){
var id= $(this).attr("id");
var i=id.replace("A", "B");
$("#"+i).animate({top:"-149px"},400);
});
});
</script>
<style type-"text/css">
img { position:absolute;
top:-149px; }
li{margin: 0; padding: 0; border: 0;}
ul {width: 700px; margin: 0 auto; text-align: center;}
li {float:right;list-style: none;}
li a{
display: block;
width: 97px;
padding: 72px 0 0 0;
margin: 0 32px 0 32px;
font: bold 16px Helvetica;
}
</style>
<ul>
<li><a id="A1" >A</a><img id="B1"src="1.png" /></li>
<li><a id="A2" >B</a><img id="B2"src="1.png" /></li>
<li><a id="A3" >C</a><img id="B3"src="1.png" /></li>
<li><a id="A4" >D</a><img id="B4"src="1.png" /></li>
</ul> 展开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").mouseover(function(){
var id= $(this).attr("id");
var i=id.replace("A", "B");
$("#"+i).animate({top:"0px"},400);
});
$("a").mouseout(function(){
var id= $(this).attr("id");
var i=id.replace("A", "B");
$("#"+i).animate({top:"-149px"},400);
});
});
</script>
<style type-"text/css">
img { position:absolute;
top:-149px; }
li{margin: 0; padding: 0; border: 0;}
ul {width: 700px; margin: 0 auto; text-align: center;}
li {float:right;list-style: none;}
li a{
display: block;
width: 97px;
padding: 72px 0 0 0;
margin: 0 32px 0 32px;
font: bold 16px Helvetica;
}
</style>
<ul>
<li><a id="A1" >A</a><img id="B1"src="1.png" /></li>
<li><a id="A2" >B</a><img id="B2"src="1.png" /></li>
<li><a id="A3" >C</a><img id="B3"src="1.png" /></li>
<li><a id="A4" >D</a><img id="B4"src="1.png" /></li>
</ul> 展开
3个回答
展开全部
绝对定位和层叠两个属性解决
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type-"text/css">
这个写错了吧？
应该是
<style type="text/css">
这个写错了吧？
应该是
<style type="text/css">
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以帮你看看，QQ：2211258789
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
