html - 多个元素的工具提示位置问题

Question

我尝试为我网站上的图像创建工具提示，但我遇到了以下问题。图片设置为float:left，每行3张图片，有好几行。工具提示应该位于图像的右侧，并且工作正常，但仅适用于第一行的图像。将鼠标悬停在第二行或第三行的图像上时，工具提示位于工具提示从顶部数第三张图像的位置。我做错了什么？

我的 CSS 代码:

.friend_img { opacity:0.6; margin:0; width:83.333333px; float:left; }
.friend_img:hover { opacity:1.0; }

.friend span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
.friend:hover span{display:inline; position:absolute; background:#ffffff;
border:1px solid #cccccc; color:#6c6c6c;}

HTML 代码:

<a class="friend" href="profile.php?id=32">
   <img class="friend_img" src="member.png">
   <span>FIRST NAME LAST NAME</span>
</a>

Answer 1

这是修改后的CSS:

.friend_img {
    opacity:0.6;
    margin:0;
    width:83.333333px;
    float:left;
}
.friend_img:hover {
    opacity:1.0;
}  
span{
    display:none;
}
.friend:hover span{
    display: inline-block;
    z-index:100;
    width:130px;
    top:20;
    left:80px;
    position: absolute;
    background:#ffffff;
    border:1px solid #cccccc; color:#6c6c6c;
}
a.friend {
    position:relative;
    display:inline-block
}

这是 html:

<div style="width:300px;border:1px solid black; text-align:center" >
    <div>
        <a class="friend" href="profile.php?id=32">    
            <img class="friend_img" src="icon.png">    
            <span>FIRST NAME LAST NAME</span>
        </a>

        <a class="friend" href="profile.php?id=32">    
            <img class="friend_img" src="icon.png">    
            <span>FIRST NAME LAST NAME</span>
        </a>


        <a class="friend" href="profile.php?id=32">    
            <img class="friend_img" src="icon.png">    
            <span>FIRST NAME LAST NAME</span>
        </a>
    </div>

    <div>

        <a class="friend" href="profile.php?id=32">    
            <img class="friend_img" src="icon.png">    
            <span>FIRST NAME LAST NAME</span>
        </a>

        <a class="friend" href="profile.php?id=32">    
            <img class="friend_img" src="icon.png">    
            <span>FIRST NAME LAST NAME</span>
        </a>


        <a class="friend" href="profile.php?id=32">    
            <img class="friend_img" src="icon.png">    
            <span>FIRST NAME LAST NAME</span>
        </a>
    </div>

</div>

我在这里发布了工作示例:http://jsfiddle.net/7jZQa/2/