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

Question

我想在某个表的某个<td> 上显示某个<div>。这是我在 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>';

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

这是我使用的 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>

Answer 2

您可以使用 JQuery 来实现这一点。例如你有 id="avatarTD"

$("#avatarTD").mouseover(function(){
    $(".change_avatar").show();
});

$("#avatarTD").mouseout(function(){
    $(".change_avatar").hide();
});