php - 在某些 <td> 上显示 <div>

Question

我想展示某些 <div>在某个<td>一张 table 。这是我在 HTML 中尝试的内容:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td width="10%" valign="middle">{$avatar}{$change_avatar}</td>
        <td class="trow1" width="90%" valign="top">
            {$online_status}<span class="largetext"><strong>{$formattedname}</strong></span>
            <div class="smalltext">{$groupimage}</div>
        </td>
    </tr>
</table>

在这段代码中，我有这个:

$change_avatar = '<div class="change_avatar"><a href="usercp.php?action=avatar">Change Avatar</a></div>';

我要显示{$change_avatar}当鼠标移到第一个时鼠标悬停 <td>表的代码，我在上面显示的代码。

这是我使用的 CSS；

.change_avatar{
    display: none;
    font-size: 11px;
    background: #363737;
    color: #FFF;
    opacity: 0.8;
    border-radius: 2px;
    padding: 3px 5px;
}

.change_avatar a:link, .change_avatar a:visited, .change_avatar a:active{
    color: #FFF !important;
    text-decoration: none;
}

td:hover .change_avatar{
    display: inline;
    margin-top: 50px;
    margin-left: -70px;
    position: absolute;
}

请帮忙。

Answer 1

试试这个:

CSS:

.change_avatar{
    display: none;
    font-size: 11px;
    background: #363737;
    color: #FFF;
    opacity: 0.8;
    border-radius: 2px;
    padding: 3px 5px;
}

.change_avatar a:link, .change_avatar a:visited, .change_avatar a:active{
    color: #FFF !important;
    text-decoration: none;
}

td #change_avatar:hover .change_avatar{
    display: inline;
    margin-top: 50px;
    margin-left: -70px;
    position: absolute;
}

HTML:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td width="10%" valign="middle" id="change_avatar">{$avatar}{$change_avatar}</td>
        <td class="trow1" width="90%" valign="top">
            {$online_status}<span class="largetext"><strong>{$formattedname}</strong></span>
            <div class="smalltext">{$groupimage}</div>
        </td>
    </tr>
</table>