怎么样用div+css做出鼠标放在图片上下面的内容变化
新手求指教怎么样用div+css做出鼠标放在图片上时，下面或右边的内容变化变化的地方还有还要有图片的请把代码写出来谢谢...
新手求指教
怎么样用div+css做出鼠标放在图片上时，下面或右边的内容变化
变化的地方还有还要有图片的
请把代码写出来
谢谢 展开
怎么样用div+css做出鼠标放在图片上时，下面或右边的内容变化
变化的地方还有还要有图片的
请把代码写出来
谢谢 展开
2个回答
展开全部
那可以用隐藏层来解决吖
例如
<style type="text/css">
body{ margin:0; text-align:center; background-color:#000000; font-size:12px;}
#wrapper{ width:700px; background-color:#fff; margin:0 auto; height:300px; position:relative;}
#news1,#news2{ border:1px solid black; width:500px; margin:10px; line-height:20px; padding:10px; text-align:left;}
#news2{ display:none;}
#news1 img,#news2 img{ float:left; margin:3px; border:1px solid #666; padding:5px;}
#news1 ul,#news2 ul{ margin:0; padding:0; height:24px; background:url(images/titlebg.gif) repeat-x; list-style:none;}
#news1 ul li,#news2 ul li{ float:left; width:62px; height:24px; text-align:center; font-weight:600; cursor:pointer; margin:0;padding:0;}
.tab1{ background:url(images/tabbg1.gif) no-repeat;}
.tab2{ background:url(images/tabbg2.gif) no-repeat; color:#fff;}
.content{ border-left:1px solid #ccc;border-bottom:1px solid #ccc;border-right:1px solid #ccc; padding:10px; height:180px;}
</style>
<script language="JavaScript">
function changeTab(elementId1,elementId2,no)
{
if(no==1)
{
document.getElementById(elementId1).style.display="block";
document.getElementById(elementId2).style.display="none";
}
else
{
document.getElementById(elementId1).style.display="none";
document.getElementById(elementId2).style.display="block";
}
}
</script>
<body>
<div id="wrapper">
<div id="news1">
<ul>
<li class="tab1">篮球</li>
<li class="tab2" onMouseOver="changeTab('news1','news2',2)">足球</li>
</ul>
<div class="content">
<p>新浪体育讯 北京时间6月3日，东部决赛将在克里夫兰进行第六场决战。目前，小皇帝詹姆斯领军的骑士以3-2的总比分领先东部头号种子活塞。值得一提的是，活塞是在先赢两场之后又连着输了三场，被骑士率先拿到赛点，形势极为不妙。活塞肯定将力争把比赛带回底特律，而骑士则要借着上一场比赛的冲劲，一鼓作气，在主场闯进总决赛。</p>
<p>对于活塞来说，今天传来的好消息可以让他们松一扣气，因为麦克代斯可以不用因为上一场比赛中对骑士瓦莱乔的恶意犯规而停赛。这样，这位活塞阵中经验丰富的替补老将将在明天的比赛中重新发挥自己的威力，为活塞的板凳厚度以及防守强度做出贡献。</p>
</div>
</div>
<div id="news2">
<ul>
<li class="tab2" onMouseOver="changeTab('news1','news2',1)">篮球</li>
<li class="tab1">足球</li>
</ul>
<div class="content">
<p><img src="images/football.jpg">英格兰与巴西的热身赛在新温布利球场展开角逐，最终三狮军团主场1比1战平对手。下半时，英格兰新老队长打出配合，重返国家队的贝克汉姆精准任意球助攻特里得分，巴西替补迭戈终场前追平比分。英格兰队在新温布利首次亮相，88745名球迷到场助威，不过由于上个月暴雨和三个级别联赛升级附加赛的摧残，草皮状况并不理想。贝克汉姆被放逐335天后重返国家队，第95次为英格兰出战，上次出场是去年7月1日世界杯8强赛负于葡萄牙。队长袖标仍戴在特里手臂上。
</p>
</div>
</div>
</div>
</body>
ps:背景图片的路径你自己修改修改咯
例如
<style type="text/css">
body{ margin:0; text-align:center; background-color:#000000; font-size:12px;}
#wrapper{ width:700px; background-color:#fff; margin:0 auto; height:300px; position:relative;}
#news1,#news2{ border:1px solid black; width:500px; margin:10px; line-height:20px; padding:10px; text-align:left;}
#news2{ display:none;}
#news1 img,#news2 img{ float:left; margin:3px; border:1px solid #666; padding:5px;}
#news1 ul,#news2 ul{ margin:0; padding:0; height:24px; background:url(images/titlebg.gif) repeat-x; list-style:none;}
#news1 ul li,#news2 ul li{ float:left; width:62px; height:24px; text-align:center; font-weight:600; cursor:pointer; margin:0;padding:0;}
.tab1{ background:url(images/tabbg1.gif) no-repeat;}
.tab2{ background:url(images/tabbg2.gif) no-repeat; color:#fff;}
.content{ border-left:1px solid #ccc;border-bottom:1px solid #ccc;border-right:1px solid #ccc; padding:10px; height:180px;}
</style>
<script language="JavaScript">
function changeTab(elementId1,elementId2,no)
{
if(no==1)
{
document.getElementById(elementId1).style.display="block";
document.getElementById(elementId2).style.display="none";
}
else
{
document.getElementById(elementId1).style.display="none";
document.getElementById(elementId2).style.display="block";
}
}
</script>
<body>
<div id="wrapper">
<div id="news1">
<ul>
<li class="tab1">篮球</li>
<li class="tab2" onMouseOver="changeTab('news1','news2',2)">足球</li>
</ul>
<div class="content">
<p>新浪体育讯 北京时间6月3日，东部决赛将在克里夫兰进行第六场决战。目前，小皇帝詹姆斯领军的骑士以3-2的总比分领先东部头号种子活塞。值得一提的是，活塞是在先赢两场之后又连着输了三场，被骑士率先拿到赛点，形势极为不妙。活塞肯定将力争把比赛带回底特律，而骑士则要借着上一场比赛的冲劲，一鼓作气，在主场闯进总决赛。</p>
<p>对于活塞来说，今天传来的好消息可以让他们松一扣气，因为麦克代斯可以不用因为上一场比赛中对骑士瓦莱乔的恶意犯规而停赛。这样，这位活塞阵中经验丰富的替补老将将在明天的比赛中重新发挥自己的威力，为活塞的板凳厚度以及防守强度做出贡献。</p>
</div>
</div>
<div id="news2">
<ul>
<li class="tab2" onMouseOver="changeTab('news1','news2',1)">篮球</li>
<li class="tab1">足球</li>
</ul>
<div class="content">
<p><img src="images/football.jpg">英格兰与巴西的热身赛在新温布利球场展开角逐，最终三狮军团主场1比1战平对手。下半时，英格兰新老队长打出配合，重返国家队的贝克汉姆精准任意球助攻特里得分，巴西替补迭戈终场前追平比分。英格兰队在新温布利首次亮相，88745名球迷到场助威，不过由于上个月暴雨和三个级别联赛升级附加赛的摧残，草皮状况并不理想。贝克汉姆被放逐335天后重返国家队，第95次为英格兰出战，上次出场是去年7月1日世界杯8强赛负于葡萄牙。队长袖标仍戴在特里手臂上。
</p>
</div>
</div>
</div>
</body>
ps:背景图片的路径你自己修改修改咯
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
