Question

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

123 [不悬停]
123456789123 [悬停期间]

我试过这个：

<!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>

但是我想让它出来然后慢慢回来，我确定有更好的方法可以做到这一点，因为我不想逐个像素地让它变慢，因为那样会拉网页

Answer 1

我认为CSS转换最适合这种情况，不需要JS。

＆＃13;

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

＆＃13;

<div>123456789123</div>

＆＃13;

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

1 个答案: