如何让html的p标签hover的时候隐藏

html-css016

如何让html的p标签hover的时候隐藏,第1张

使用css设定"p:hover"的"display"属性为"none"，例如：

p:hover{

display:none

}

从你的代码来看，你的html代码中p标签里面style="visibility:"这句让 display:none属性覆盖了。你需要删除p标签的style，然后CSS代码才会管用。

<!--给予原生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>