Javascript 同时使用onmouseover和；onmouseout以展开容器_Javascript_Html_Css_Onmouseover_Onmouseout

Javascript 同时使用onmouseover和；onmouseout以展开容器

javascript html css

Javascript 同时使用onmouseover和；onmouseout以展开容器,javascript,html,css,onmouseover,onmouseout,Javascript,Html,Css,Onmouseover,Onmouseout,我尝试使用JavaScript和HTML事件“onmouseover”和“onmouseout”来扩展和收缩容器。基本上，当鼠标不悬停时，它只是一个标题，但当鼠标位于标题上方时，它会展开并显示额外的信息像下面的例子一样，我能够在自行车上展开并显示额外的文本和添加的信息 <div class="content" onmouseover="document.getElementById('Bicycle_Text').style.display='block'">

我尝试使用JavaScript和HTML事件“onmouseover”和“onmouseout”来扩展和收缩容器。基本上，当鼠标不悬停时，它只是一个标题，但当鼠标位于标题上方时，它会展开并显示额外的信息

像下面的例子一样，我能够在自行车上展开并显示额外的文本和添加的信息

    <div class="content" onmouseover="document.getElementById('Bicycle_Text').style.display='block'">
      <h1>The Bicycle</h1> 
      <p id="Bicycle_Text" style="display:none">Bicycles were first introduced in the 19th century in Europe.</p>
    </div>


自行车
自行车最早出现在19世纪的欧洲

但是，当鼠标离开分区时，我希望分区返回到原始的未展开状态。我将使用“onmouseout”事件执行此操作，并将Javascript更改为display='None'。我不确定如何在同一行文本中同时使用“onmouseover”和“onmouseout”事件

有没有关于我如何做到这一点的建议，甚至是一种完全不同的方式？我知道CSS悬停函数，但不知道它将如何像现在这样扩展。谢谢

函数增加（）
    function increase()
    {
        clearInterval(intervalid);
         intervalid=setInterval(zoomin,10);

    }
    function zoomin()
    {

        if(width<400){
            width=width+difference;
            document.getElementById("img1").style.width=width;
        }
        else{
            clearInterval(intervalid);
        }

    }
    function decrease()
    {
        clearInterval(intervalid);
        intervalid=setInterval(zoomout,10);
    }
    function zoomout()
    {

        if(width>300){
            width=width-difference;
            document.getElementById("img1").style.width=width;
        }
        else{
            clearInterval(intervalid);
        }

    }


<body>
    <img id=img1 onmouseover="increase()" onmouseout="decrease()" src=cah4.jpg  width="450">

{
clearInterval（intervalid）；
intervalid=setInterval（缩放，10）；
}
函数zoomin（）
{
如果（300）{
宽度=宽度差；
document.getElementById（“img1”）.style.width=width；
}
否则{
clearInterval（intervalid）；
}
}

这可能会对你有所帮助