Question

HTML鼠标放在链接上的时候。让第一个span隐藏起来，然后第二个span显示，鼠标离开后恢复。

代码要怎么改。
<a href="#">
<li>
<spanclass="c1"id="c1"style="display:none;">
123
</span>
<span class="c1" id="c2"style="display:block;">
312
</span>
</li>
</a>

Answer 1

<!--给予原生javascript本人测试已通过   望采纳 -->


<a href="#" onMouseOver="show()" onMouseOut="hide()"> 
<li>
<span class="c1" id="c1" style="display:block;"> 12345678
</span>
<span class="c1" id="c2" style="display:none;">
  312sdafasf
</span>
</li>
</a> 
<script>
    function show(){
        var hander1= document.getElementById("c1");
        var hander2= document.getElementById("c2");
        hander1.style.display="none";
        hander2.style.display="block";
    }
    function hide(){
        var hander1= document.getElementById("c1");
        var hander2= document.getElementById("c2");
        hander1.style.display="block";
        hander2.style.display="none";
    }
</script>

Answer 2

可以直接写一个js如下

$(function(){
$("a").hover(
function(){
$("#c1").css("display","none");
$("#c2").css("display","block");
},
function(){
$("#c1").css("display","block");
$("#c2").css("display","none");
}
);
});

望采纳

Answer 3

<style>
    a:hover li span.c1{display:none;}
    a:hover li span.c2{display:block;}
</style>

给第二个span加个class名，为c2

Answer 4

a:hover #c1{display:none;}
a:hover #c2{display:block;}
在css里面添加这两行代码 然后将span标签上的style属性删掉

Answer 5

要 用js