Question

当我将鼠标悬停在名为#TyBio的图像上时，我正试图将#descriptblock放入名为#TyPhoto的框中。我看了几个例子，其中人们做了类似的事情，但由于某种原因，文字在我悬停时不会显示。提前谢谢！

的Javascript

$(document).ready(function() {
$("#TyPhoto").hover(function(){
    $("#TyBio").show();
},function () {
    $("#TyBio").hide();

});

});

CSS

#descriptblock {
z-index:5;
width:1150px;
height:100px;
top:270px;
left:0px;
position:absolute;
background:white;
text-align:left;
display:block;
}

    #TyBio{
    display:none;
}

HTML

<html>
<head>
<link rel="stylesheet" href="https://googledrive.com/host/0B4nfVqlTfnTzQ0V5NlQydy0xU00" type="text/css" />
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><img id="TyPhoto" src="https://googledrive.com/host/0B4nfVqlTfnTzWDVMRzBEd1RwX2s" width="204" height="272" /></li>
<li><img src="https://googledrive.com/host/0B4nfVqlTfnTzU0pTYWVwRXZ0Tjg" width="208" height="286" /></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
<span id="descriptblock">
<div id="TyBio">TESTTHISBIOTEST!</div>
</span>
</ul>
</div>
</body>
</html>

Answer 1

您的HTML不包含您的JavaScript或它所依赖的jQuery库。

<script src="jquery.js"></script>
<script src="your.js"></script>

如果我添加它们，那么works。

Answer 2

您包含了两个版本的jquery库文件。

http://2013.igem.org/Team:Georgia_State/teamgallery.html

查看来源，第71行（v1.4.2）和第132行（v1.9.1）。

为什么我的.hover（）不起作用？

2 个答案: