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

このコードを動作させることができません。私がやろうとしているのは、マウスオーバーで行のサイズを大きくし、マウスアウトで1pxに戻すことだけです。

これにアニメーションを組み込む方法があればいいですね。

ありがとう。

4

2 に答える 2

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 の例

于 2013-04-06T22:27:43.050 に答える
2

アニメーションも追加する必要がある場合は、jQueryを使用することをお勧めします。それは速くて簡単です：

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

デモ: http://jsfiddle.net/8YsSd/

于 2013-04-06T22:26:54.053 に答える