Question

<html>
  <head>
    <style>
      #line {
        height: 1px;
        width: 100%;
        float: left;
        background-color: #8e9194;
        position: absolute;
        top: 85%;
        left: 0;
      }
    </style>
  </head>
  <body>
    <button id="b1">Click Here</button>
    <script>
      var o = document.getElementById("line");
      document.getElementById("b1").onmouseover = function () {
        o.style.height = "10px";
      };
      document.getElementById("b1").onmouseout = function () {
        o.style.height = "1px";
      };
    </script>
    <div id="line"></div>
  </body>
</html>

无法使此代码生效。我所要做的就是在鼠标悬停时增加线条的大小，并在mouseout上将其恢复为1px。

如果有任何方法可以将一些动画融入其中，那也很好。

感谢。

Answer 1

如果您还需要添加一些动画，我建议您使用jQuery。它快速而简单：

$(function() {
    $("#b1").hover(function() {
        $("#line").stop().animate({ height: 10 }, 1000);
    }, function() {
        $("#line").stop().animate({ height: 1 }, 1000);
    });
});

DEMO： http://jsfiddle.net/8YsSd/

Answer 2

您需要将JavaScript放在您所指的元素之后：

<button id="b1">Click Here</button>
<div id="line"></div>

<script> var o = document.getElementById("line");
document.getElementById("b1").onmouseover = function ()
{o.style.height="10px";}; document.getElementById("b1").onmouseout =
function () {o.style.height="1px";}; 
</script>

您的行var o = document.getElementById("line");正在元素实际存在之前执行。

<强> jsFiddle example

用Javascript改变风格

2 个答案: