Question

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

A是正面和B反面内容不一样，鼠标移动到A正面上会变成B反面。请问这种效果用JS如何实现？
最好能循环的哈，
我是这样写的。
<li>
<div class="a">A面内容</div>
<div class="b">B面内容</div>
</li>
省略N个<li></li>
<li>
<div class="a">A面内容</div>
<div class="b">B面内容</div>
</li>
JS应该怎么写？谁能指点一二，本人对JS不懂啊，请详细些说可以么！~谢谢啦！~

Answer 1

1.先要将B隐藏,添加id<div class="b" id="divb" style="display:none">B面内容</div>
2.添加方法<div class="a" id = "diva" onmouseover="fn()">A面内容</div>
3.js:function fn(){
         var divb = document.getElementById("divb");
         var diva = document.getElementById("diva");
         diva.style.display="none";
         divb.style.display="block";
    }
同理可以设置鼠标移除 B隐藏，A显示

Answer 2

上面2位的代码，我都试了一下，发现

jquery那位写的会不停的闪烁

原生写的不太好循环复用

你看看我这个满足你需求吗？

<style>
li {
    list-style:none;
    width:30px;
    height:30px;
    overflow:hidden;
    border:1px solid #000;
}
li a {
    display:block;
    text-align:center;
    width:30px;
    height:30px;
    position:relative;
}
li:hover a.a, li:hover a.b {
    top:-30px;
}
</style>

<li> <a class="a">A</a> <a class="b">B</a> </li>
<li> <a class="a">A</a> <a class="b">B</a> </li>

Answer 3

$(function(){
        $('li div.a').hover(
            function(){
                $(this).hide();
                $(this).next().show();
            },
            function(){
                $(this).show();
                $(this).next().hide();
            }
        )
    })

Answer 4

$(function () {
    function toggleFn() {
        $(this).find('div').toggle();
    };
    $('li').hover(toggleFn, toggleFn);
});

Answer 5

$('.a').mouseenter(function() {
this.style.display = 'none';
this.nextElementSibling.style.display = 'block';
});
$('.a').mouseout(function() {
this.style.display = 'block';
this.nextElementSibling.style.display = 'none';
});