Question

我在一张桌子上工作，我希望在将这些信息鼠标悬停在500毫秒之后，可以在一列中显示另外一行信息。

$(document).ready(function(){
    $('.collapsed').hide();
    $("td#name").hover(function() {
       $(this).children('.collapsed').delay(500).slideToggle(100);
    })
});

jsfiddle在这里： http://jsfiddle.net/y4Mdy/846/

我遇到的两个问题： 1）在切换时，＆＃34;文本＆＃34;中的文本。列向下移动。我想让它留在原地，即＆＃34;将鼠标悬停在我身上以获取信息＆＃34;应该继续与＆＃34;这是一些额外的文字＆＃34;。我尝试过添加clear：left，但这并不能解决这个问题。

2）我为切换设置了延迟，因为我不希望显示其他信息，直到用户将鼠标停留在那里一段时间...即，只是鼠标移除文本短暂不应该触发要显示的附加文本。然而，使用延迟只会使附加文本稍后显示。如果您只是从桌子的底部开始并将鼠标快速移动到顶部，则此行为很明显。所有其他信息行都会显示出来。我怎样才能防止这种情况发生？

Answer 1

首先，元素ID是唯一的，您只能在有效文档中使用它们一次。因此，我将id="name"的所有实例更改为class="name"，将id="small"的所有实例更改为class="small。

其次，我使用了setTimeout()和clearTimeout()的组合来创建所需的延迟，但没有“链接”延迟。

最后，slideToggle()（以及相关的slideUp和slideDown）似乎导致了问题，因此我将其替换为fadeIn()和{{1} }。我相信这会产生理想的行为，但如果没有，请告诉我。

<强> HTML

fadeOut()

CSS （只是一个很小的改动，以反映从ids到班级的变化）

<table class="listings"> 
    <thead> 
        <tr> 
            <th class="star"><span title="Save listing to favorites">&#9734;</span></th> 
            <th colspan="3">Description</th> 
            <th colspan="2">Text</th> 
        </tr> 
    </thead> 

    <tbody> 
        <tr> 
            <td class="star"><span title="Save listing to favorites">&#9734;</span></td> 

            <td class="name" colspan="3">Hover over me for more info.
                <span class="collapsed">Here is some hovered over text.</span> 
            </td> 
            <td class="small" colspan="2">Here is additional text.</td>
        </tr> 

         <tr> 
            <td class="star"><span title="Save listing to favorites">&#9734;</span></td> 

            <td class="name" colspan="3">Hover over me for more info.
                <span class="collapsed">Here is some hovered over text.</span> 
            </td> 
            <td class="small" colspan="2">Here is additional text.</td>
        </tr> 

         <tr> 
            <td class="star"><span title="Save listing to favorites">&#9734;</span></td> 

            <td class="name" colspan="3">Hover over me for more info.
                <span class="collapsed">Here is some hovered over text.</span> 
            </td> 
            <td class="small" colspan="2">Here is additional text.</td>
        </tr> 

    </tbody> 
</table>

<强>的Javascript

div.left-and-right {
    margin-left:auto;
    margin-right:auto;
    position:relative;
    margin-top:5%;
    width:90%;
    min-height:300px;
}

.listings {
    width:100%;
    border-collapse:collapse;
    border:1px solid #E18728;
    font-size:1em;
}

.listings td {
    padding:5px 10px;
    text-align:left;
}

.listings th {
    padding:5px 10px;
    margin:0px 10px;
    background-color:#E18728;
    text-align:left;
}

.listings tr:nth-child(odd) {
    background-color:#F6F6F6;
    border-top:1px solid #EAE8E8;
    border-bottom:1px solid #EAE8E8;
}
td.small {
    font-size:0.8em;
    padding-top:8px;
    vertical-align:top;
}

.star {
    padding:5px;
    margin:0px;
}

.collapsed{
    display:block;
    margin-top:40px;
}

DEMO

Jquery悬停在文本上以进行元素切换

1 个答案: