Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Animated Menu Hover 1</title>

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

<script type="text/javascript">
$(document).ready(function(){

    $(".stats a").hover(function() {
        $(this).next("em").animate({opacity: "show", bottom: "-75"}, "fast");
    }, function() {
        $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
    });


});
</script>

<style type="text/css">
body {
    margin: 10px auto;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}
.stats a {

    color: #000000;

    text-decoration: underline;
    font-weight: bold;
    background: #ccc;
}
.stats tr  em {
    border:thin;
    border-color:black;
    background-color:silver;
    color:gray;
    width: 180px;
    height: 45px;
    top:3em;    
    text-align: center;
    font-style: normal;
    display: none;
}
</style>
</head>

<body>

<div class="stats">
<table style="width: 100%" cellspacing="1" >
    <tr>
        <td  >Username</td>
        <td  >Last Name</td>
        <td  >First Name</td>
        <td  >MI</td>
        <td  >Address</td>
        <td style="width: 193px"><a href="http://www.webdesignerwall.com">Web Desi</a><em>wooo</em></td>
        <td  >Age</td>
        <td  >Resident County</td>
    </tr>
    <tr>
        <td  >ww</td>
        <td  >Wilson</td>
        <td  >Woodrow</td>
        <td  >I</td>
        <td  >Penn Ave.</td>
        <td  >&nbsp;</td>
        <td  >112</td>
        <td  >&nbsp;</td>
    </tr>
    <tr>
        <td  >othername</td>
        <td  >Last</td>
        <td  >First Name</td>
        <td  >&nbsp;</td>
        <td  >None</td>
        <td  >&nbsp;</td>
        <td  >56</td>
        <td  >Fayette</td>
    </tr>
    <tr>
        <td  >Jr</td>
        <td  >Routen</td>
        <td  >Johnny</td>
        <td  >R</td>
        <td  >1 St.</td>
        <td  >&nbsp;</td>
        <td  >23</td>
        <td  >Hart</td>
    </tr>
    <tr>
        <td  >Jackson</td>
        <td  >Jackson</td>
        <td  >Smith</td>
        <td  >I</td>
        <td  >123 Address St.</td>
        <td  >&nbsp;</td>
        <td  >34</td>
        <td  >Pike</td>
    </tr>
    <tr>
        <td  >roquefort</td>
        <td  >Head</td>
        <td  >Cheese</td>
        <td  >M</td>
        <td  >green bay</td>
        <td  >&nbsp;</td>
        <td  >19</td>
        <td  >Menifee</td>
    </tr>
    <tr>
        <td  >Greenstein</td>
        <td  >Green</td>
        <td  >Up</td>
        <td  >C</td>
        <td  >1 Holler Road</td>
        <td  >&nbsp;</td>
        <td  >55</td>
        <td  >Greenup</td>
    </tr>
    <tr>
        <td  >Mwb</td>
        <td  >Merriwether</td>
        <td  >Brandon</td>
        <td  >R</td>
        <td  >Drive</td>
        <td  >&nbsp;</td>
        <td  >29</td>
        <td  >Rockcastle</td>
    </tr>
</table>


</div>
</body>
</html>

Answer 1

也许它无效，因为在尝试使用jQuery更改'position:'和top:之前，您没有在css中设置bottom:？

Answer 2

好的，修好了。不得不从jQuery中取出定位。感谢帮助，网民们。

在悬停时更改隐藏元素的位置

2 个答案: