0

自分のサイトで画像のツールチップを作成しようとしていますが、次の問題があります。画像はfloat：leftで設定され、1行に3つの画像があり、複数の行があります。ツールチップは画像の右側にあるはずで、正常に機能していますが、最初の行の画像に対してのみです。2行目または3行目の画像にカーソルを合わせると、ツールチップは上から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 に答える