Question

我想为每个动态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。最重要的是，我如何在每个td附近定位div

Answer 1

<强> 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

Answer 2

如果您制作道具position:relative您可以向悬停时显示的每个道明添加position:absolute的隐藏div。

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

如果你想支持ie6，这将需要一个hack的黑客攻击。

Answer 3

您可以使用jQuery .hover()

jQueryUI position utility将div放在你想要的位置。

以下是一个例子。你可以用很多不同的方式做到这一点我认为重要的是看到position（）方法在元素可见之前不起作用。至少那是我的经历。

<!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>

在动态td鼠标上显示div

3 个答案: