Question

我想在表格的某个<div>上显示某些<td>。以下是我在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>

Answer 2

你可以使用JQuery来实现这一目标。例如你有id =“avatarTD”

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

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

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

2 个答案:

CSS：

HTML：