我正在制作一些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,但没有一个有效。)
谢谢!
萨姆
答案 0 :(得分:2)
如果要使用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>