jQuery 悬停在表格上

Question

html结构是这样的:

<tr class="row-1 row-first">
  <td class="col-1 col-first">
    <div class="views-field views-field-field-logo-image"></div>
    <div class="views-field views-field-field-logo-title"></div>
  <td class="col-2">
<td class="col-3 col-last"> 

".views-field views-field-field-logo-title"是一个标题，只有当我将鼠标悬停在表格上时才会出现在图像上。

这是元素的 CSS:

.view-clone-of-logo td {
    width:230px;
    float:left;
    margin-right:30px;
}

.views-field-field-logo-title {
    background: none repeat scroll 0 0 #B2D433;
    color: #FFFFFF;
    font-size: 13px;
    height: 130px;
    margin: -5000px 0 0;
    opacity: 0.9; 
    padding-left: 10px;
    padding-top: 20px;
    position: absolute; 
    width: 220px;
    z-index: 10;
}

我已经设法用这段代码在悬停时显示标题:

(function ($) {
    $(document).ready(function() {
        $('.view-clone-of-logo td').hover(function() {
            $('.view-clone-of-logo .views-field-field-logo-title').css("margin-top", "-155px");
        }, function() {
            $('.view-clone-of-logo .views-field-field-logo-title').css("margin-top", "-5000px");
        });


        });

}(jQuery));

但是，当我将鼠标悬停时，所有标题都显示在图像上。

假设我将鼠标悬停在第一行/第一列上，我想显示该列的标题。

如何显示特定列的标题？

Answer 1

你可以用纯 CSS 实现

.view-clone-of-logo td:hover .views-field-field-logo-title {
    margin-top: -155px;
}