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;
}

Answer 2

这应该有效：

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


        });

}(jQuery));

你对jQuery说：找到所有.view-clone-of-logo .views-field-field-logo-title然后这样做，当你想说：找到悬停的元素中的.views-field-field-logo-title。

jQuery悬停在表上

2 个答案: