在鼠标悬停时显示按钮

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。 这里的问题是，由于!important关键字， hide类具有更高的优先级。 这就是为什么您不能仅通过添加嵌入式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");
        }
    });
});

您可能要检查提琴手