dongliao1949
2017-02-16 19:29
浏览 385
已采纳

HTML / JavaScript悬停时展开按钮/ div

I know the onmouseover and onmouseout so that they can run a function when hovered over on when not being hovered over but I don't know how to make them expand. I have made dropdown boxes, but I can't get them to expand. EX:

123 [Not Hovering]
123456789123 [During Hover]

I've Tried This:

<!DOCTYPE html>
    <head>
    </head>
    <body>
        <p id="exp" onmouseover="over()" onmouseout="out()" style="background- color: #FFD700;width: 100px;height: 250px;">
            Expand Me!
        </p>
        <button onclick="run()">Run</button>
        <script type="text/javascript">
            function over() {
                document.getElementById("exp").style.width = "250px";
            }
            function out() {
                document.getElementById("exp").style.width = "100px";
            }
        </script>
        <div id="x" style="background-color: #0FF">&emsp;</div>
    </body>
</html>

but I want it to come out and go back in slowly not instantly, and I'm sure there is a better way to do this because I don't want to go pixel by pixel to get it to go slower because that would lagg the webpage

图片转代码服务由CSDN问答提供 功能建议

我知道onmouseover和onmouseout，以便他们可以在不悬停时盘旋时运行一个函数但是我 不知道如何让他们扩大。 我已经制作了下拉框，但是我无法让它们扩展。

123 [不悬停] < br> 123456789123 [悬停期间]

我试过这个： 

 ＆lt;！DOCTYPE html＆gt; 
＆lt; head＆gt; 
＆lt; / head＆gt; 
＆lt; body＆gt; 
＆lt; p id =“exp”onmouseover =“over（）”onm​​ouseout =“out  （）“style =”background-color：＃FFD700; width：100px; height：250px;“＆gt; 
展开我！
＆lt; / p＆gt; 
＆lt; button onclick =”run（）“＆gt; 运行＆lt; / button＆gt; 
＆lt; script type =“text / javascript”＆gt; 
 function over（）{
 document.getElementById（“exp”）。style.width =“250px”; 
} 
  function out（）{
 document.getElementById（“exp”）。style.width =“100px”; 
} 
＆lt; / script＆gt; 
＆lt; div id =“x”style =“background-color  ：＃0FF“＆gt;＆amp; emsp;＆lt; / div＆gt; 
＆lt; / body＆gt; 
＆lt; / html＆gt; 
   
 
 
但我想要它 出来 并且不是立即回来，我确信有更好的方法可以做到这一点，因为我不想逐个像素地让它变得更慢，因为这样会使网页瘫痪
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

1条回答 默认 最新

  • duanfu6160 2017-02-16 20:03
    最佳回答

    I think a CSS transition would be best for this, no JS needed.

    div {
  width: 25px;
  overflow: hidden;
  transition: width 1s;
}

div:hover {
  width: 100%;
}
    <div>123456789123</div>

    </div>
    评论
    解决 无用
    打赏 举报

报告相同问题？

提交

相关推荐 更多相似问题