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>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题