Question

我正在制作一些HTML，我希望这样做，以便当你将鼠标移到div上时，它会下沉约10 px，点击它时会完全下沉。我之前使用没有任何链接（<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，则需要包含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>

如何在悬停和点击时使div下沉

1 个答案: