Question

js控制div显示与隐藏,js利用"hover"属性

Answer 1

1.首先样式要设定好，在每个li区域只能显示a或者b。
2.引入js库代码（jquery库需要引用，1.4版本以上都可以）
3.设定外部ul的id属性：假设为ullist
4.编写js代码

下面是我写的一个例子代码，供你参考，jquery库需要自己下载并引用

<ul id="ullist">
<li>
<div class="a">A面内容</div>
<div class="b">B面内容</div>
</li>
<li>
<div class="a">A面内容</div>
<div class="b">B面内容</div>
</li>
</ul>

<style type="text/css">
#ullist
{
overflow: hidden;
}

#ullist li
{
height: 30px;
width: 100px;
overflow: hidden;
line-height: 30px;
}

#ullist .a
{
width: 30px;
width: 100px;
display: block;
}

#ullist .b
{
width: 30px;
width: 100px;
display: none;
}
</style>

<script type="text/javascript">

$(function () {
$('#ullist li').hover(
function () { $('.a', this).hide(); $('.b', this).show(); },
function () { $('.b', this).hide(); $('.a', this).show(); }
)
});

</script>

Answer 2

这是用jquery的方法
$(document).ready(function(){
$('.a,.b').css('cursor','pointer');
$('.a').hover(function(){
$(this).css('display','none');
$(this).siblings('.b').css('display','block');
},function(){
$(this).css('display','block');
$(this).siblings('.b').css('display','none');
});

Answer 3

<div id="a" class="a" onmouseover="this.style.display='none';document.getElementById('b').style.display='';">A面内容</div>
<div id="b" class="b" onmouseover="this.style.display='none';document.getElementById('a').style.display='';">B面内容</div>