jquery - jQuery悬停在表格上

标签 jquery css html-table

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


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

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

如何显示特定列的标题?

最佳答案

这应该工作:

(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 - jQuery悬停在表格上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22045762/

相关文章:

jquery - jQuery词云验证错误

javascript - 在 mouseup 事件处理程序中取消单击事件

css - 相当于IE的背景大小属性

arrays - 需要帮助使用 <c :forEach> in JSP/JSTL

javascript - 为什么.click() 不会触发右键单击?

javascript - 选择框选项未显示为选中状态

javascript - 单击按钮旋转CSS卡

javascript - 有没有办法将变量从 ReactJS 传递到 CSS 样式表?

javascript - 如何在点击现有的 html 表格行时显示隐藏的表格行?

javascript - 如何使用jQuery在表的第n个<td>之后包装<tr/>