Question

我有一张这样的表

<tbody id="addNew">
   <tr>
      <td></td>
      <td style="padding:6px 0 0 0;"><b>Any Other Comments ?</b><i class="glyphicon glyphicon-remove pull-right hide" id="hover12" style="display: inline;"></i></td>
      <td>

      </td>
      <td width="35%" style="padding:10px 0 0 0;" class="Fsize12 out" id="a12"></td>
      <td></td>
   </tr>
</tbody>

在页面加载时隐藏了一个引导图标。当我将鼠标悬停在TD上时，我只希望按钮显示，鼠标离开时我希望它再次隐藏。

所以我确实喜欢这个

$(document).ready(function(){

        $('#addNew').on({
            mouseenter: function() {
                $(this).children().find('.glyphicon').show();
            },
            mouseleave: function() {
               $(this).children().find('.glyphicon').hide();
            }
        });
    });

但它不起作用。我的意思是鼠标悬停在按钮上仍然隐藏起来并且没有显示出来。可以指出任何身体，我指出我做错了

Answer 1

在我看来，你正在使用Bootstrap。这里的问题是hide类由于!important关键字而具有更高的优先级。这就是为什么您只需添加内联display: inline样式（使用.show方法）即可显示的原因。相反，您可以切换hide类，它也会缩短您的代码：

$('#addNew').on('mouseenter mouseleave', 'tr', function() {
    $(this).find('.glyphicon').toggleClass('hide');
});

您当然也可以单独使用removeClass('hide')和addClass('hide')：

$('#addNew').on({
    mouseenter: function() {
        $(this).find('.glyphicon').removeClass('hide');
    },
    mouseleave: function() {
        $(this).find('.glyphicon').addClass('hide');
    }
}, 'tr');

演示：http://plnkr.co/edit/m0hfHYy4LdBp7hjJd59U?p=preview

Answer 2

这是关于班级.hide的全部内容。你必须切换它。

$(document).ready(function () {

    $('#addNew').on({
        mouseenter: function () {
            $(this).children().find('.glyphicon').show();
            $(this).children().find('.glyphicon').removeClass("hide").addClass("show");
        },
        mouseleave: function () {
            $(this).children().find('.glyphicon').hide();
            $(this).children().find('.glyphicon').removeClass("show").addClass("hide");
        }
    });
});

您可能需要check fiddler

显示鼠标悬停上的按钮

2 个答案:

演示：http://plnkr.co/edit/m0hfHYy4LdBp7hjJd59U?p=preview