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

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/

Answer 2

首先，您需要将a.friend设置为position:relative;