代码之家 › 专栏 › 技术社区 › zod

在动态td的鼠标上方显示div

css jquery

zod · 技术社区 · 14 年前

我想为每个动态td显示动态div。

考虑

<tr><td><a id=1>abc</a></td></tr>
<tr><td><a id=1>cde</a></td></tr>
<tr><td><a id=1>fgh</a></td></tr>
<tr><td><a id=1>hij</a></td></tr>
<tr><td><a id=1>klm</a></td></tr>

这些tds将基于db的数据生成。我想在标签的鼠标上方显示一个div。

3 回复 | 直到 14 年前

fehays 14 年前

你可以用 jQuery .hover()

以及 jQueryUI position utility 把沙发放在你想要的地方。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<style type="text/css">
    * {font-family:Calibri}
    .data {width:100px;border:1px solid #000;display:none}
    .cell {width:200px;border:1px solid #ddd}
</style>
<script type="text/javascript">
    $(function () {
        $(".cell").hover(
            function () {
                var $td = $(this);
                var divId = '#div-' + this.id.split('-')[1];
                //show it first or it doesn't position right
                $(divId).show();                
                $(divId).position({
                    my: 'left center',
                    at: 'right center',
                    of: $td,
                    collision: 'none'
                });
            },
            function () {
                var divId = '#div-' + this.id.split('-')[1];
                $(divId).hide();
            }
        );
    });
    </script>
</head>
<body>
    <table width="200" cellspacing="3" cellpadding="2">
        <tr><td id="td-1" class="cell">Data</td></tr>
        <tr><td id="td-2" class="cell">Data</td></tr>
        <tr><td id="td-3" class="cell">Data</td></tr>
        <tr><td id="td-4" class="cell">Data</td></tr>
        <tr><td id="td-5" class="cell">Data</td></tr>
        <tr><td id="td-6" class="cell">Data</td></tr>
    </table>
    <div id="div-1" class="data">div-1</div>
    <div id="div-2" class="data">div-2</div>
    <div id="div-3" class="data">div-3</div>
    <div id="div-4" class="data">div-4</div>
    <div id="div-5" class="data">div-5</div>
    <div id="div-6" class="data">div-6</div> 
</body>
</html>

Galen 14 年前

如果你做了TDs position:relative 你可以添加一个隐藏的div position:absolute 将出现在悬停状态的每个TD。

td { position:relative; }
.hidden_div { position:absolute; left:-9999em; }
td:hover .hidden_div { left:auto; top: 100%; }  /*adjust top*/

如果你想支持的话,这需要一个ie6的黑客程序。

Jeaf Gilbert 14 年前

CSS格式:

table td div { display:none; }
table tr:hover td div { display:block; }

HTML格式

<table>
    <tr><td><a id=1>abc</a><div>div1</div></td></tr>
    <tr><td><a id=1>cde</a><div>div2</div></td></tr>
    <tr><td><a id=1>fgh</a><div>div3</div></td></tr>
    <tr><td><a id=1>hij</a><div>div4</div></td></tr>
    <tr><td><a id=1>klm</a><div>div5</div></td></tr>
</table>

display:block display:inline