css中如何让鼠标经过一个div中的文字时使得另一个div中的图片切换？

Question

我使用js的onmouseover只会让鼠标经过时显示一个图，另一个div中的图不会消失，又很难对齐不美观。谢谢！

Answer 1

<div class="about2">
<h2>活动专题</h2>
<ul>
<li class="index0603" id="qwbt1" onmouseover="javascript:qw_on('qwbt1','qwpic1');"><a href=""><span class="tow1">关注新医改 贯彻新政策</span></a></li>
<div class="index0605" style="display: block;" id="qwpic1"><a href="" target="_blank"><img src="images/main_right_img02.gif"></a></div>
<li class="index0604" id="qwbt2" onmouseover="javascript:qw_on('qwbt2','qwpic2');"><a href=""><span class="tow_2">关注新医改 贯彻新政策</span></a></li>
<div class="index0605" style="display: none;" id="qwpic2"><a href="" target="_blank"><img src="images/main_right_img02.gif"></a></div>
<li class="index0604" id="qwbt3" onmouseover="javascript:qw_on('qwbt3','qwpic3');"><a href=""><span class="tow_3">关注新医改 贯彻新政策</span></a></li>
<div class="index0605" style="display: none;" id="qwpic3"><a href="" target="_blank"><img src="images/main_right_img02.gif"></a></div>
<li class="index0604" id="qwbt4" onmouseover="javascript:qw_on('qwbt4','qwpic4');"><a class="tow_4" href=""><span class="tow_4">关注新医改 贯彻新政策</span></a></li>
<div class="index0605" style="display: none;" id="qwpic4"><a href="" target="_blank"><img src="images/main_right_img02.gif"></a></div>
</ul>
<script language="javascript">
function qw_on(qwbt,qwpic)
{
var divonload=new Array("qwbt1","qwbt2","qwbt3","qwbt4")
for(var i = 0; i < parseInt(4); i++)
{
document.getElementById(divonload[i]).className="index0604";
}
document.getElementById(qwbt).className="index0603";

var divonload=new Array("qwpic1","qwpic2","qwpic3","qwpic4")
for(var i = 0; i < parseInt(4); i++)
{
document.getElementById(divonload[i]).style.display="none";
}
document.getElementById(qwpic).style.display="block";
}
</script>
</div>
这是我做的，参考下本回答被提问者采纳