javascript - 如何让div在悬停和点击时下沉

Question

我正在处理一些 HTML，我想拥有它，以便当您将鼠标移到 div 上时，它会下沉大约 10 像素，当单击时它会完全下沉。我以前用没有任何链接 ( <a> ) 或文本 ( <p> ) 的 div 做过这个，它工作得很好。但在我的网站 ( www.metatronaut.com ) 上它根本没有下沉。在我的 javascript 代码中:

$(document).ready(function() {
   $('tag').mouseenter(function() {
      $(this).animate({
         height: '-=20px'
   });
});
$('tag').mouseleave(function() {
   $(this).animate({
       height: '+=20px'
   }); 
});
$('tag').click(function() {
   $(this).animate({
       height: '-=250px'
   });
  }); 
});

(div 为 250px)

这是我的 HTML 标签的列出方式。

<td>
    <a href="https://www.twitter.com/metatronstudios">
       <div id="twitter">
          <p>Twitter</p>
       </div>
    </a>
</td>

和 CSS

div {
height:250px;
width:250px;
}
table {
margin:auto;
}
a {
font-size:24px
text-decoration:none;
color:#FFFFFF;
}
#twitter {
background-color:#11CDFB;
}

知道出了什么问题吗？或者我应该在 JS 中放置什么标签？ (我用过 a、div、td 和 p，但都没有用。)

谢谢!

-山姆

Answer 1

如果您要使用它，则需要包含 jQuery。它需要在引用它的任何其他脚本之前加载。加载 javascript 的最佳位置通常是在您关闭之前 </body>标签。这样可以加快页面加载速度，并确保 DOM 已准备好供您进行操作。

所以在</body>之前添加这一行:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

您还需要将自己的脚本移出头部并将其放在 jQuery 之后:

<script type="text/javascript" src="script.js"></script>