问答详情
源自:3-5 显示和隐藏(display属性)

3-5中如何通过鼠标悬停 来实现隐藏和现实内容

3-5中如何通过鼠标悬停 来实现隐藏和现实内容 是用hover么 要该怎么结合使用 谢谢啦!

提问者:linkbb 2016-05-01 19:55

个回答

  • 刹那烟华丶
    2016-05-01 20:40:01
    已采纳

    通过更改display标签以及onmuose和onmouseout事件实现,具体操作:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


            <title>test13</title>

            <script type="text/javascript">

                window.onload = function(){

                    var a = document.getElementById("hover");

                    var t = document.getElementById("text");

                        a.onmouseover = function(){

                                t.style.display = "none";            

                    }

                         a.onmouseout = function(){

                                t.style.display = "block";           

                    }

                }

            </script>

        </head>


        <body>

            

            <a href="#" id="hover">hover</a>

            

            <p id="text" style="display: block">隐藏这段文字</p>

        </body>

    </html>