0

我尝试在我的网站上为图像创建工具提示，但我遇到了以下问题。图片是用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>
4

2 回答 2

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/

于 2012-12-26T02:26:44.603 回答
0

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

于 2012-12-26T01:42:09.717 回答