Showing button on mouse hover

Question

I have a table like this

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

There is a bootstrap icon which is hidden at the loading of the page.When I hover on the TD then I only I want the button to show and upon mouse Leave I want it to hide again.

So I did like this

$(document).ready(function(){

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

But it does not work.I mean on mouse over the button remains hidden and does not show up.Can any body please point out the mistake I have done

Answer 1

It seems to me you are using Bootstrap. The problem here is that hide class has higher priority due to !important keyword. That's why you can't show it by simply adding inline display: inline styles (by using .show method). Instead you can toggle hide class, it will also make your code shorter:

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

You can also go with separate removeClass('hide') and addClass('hide') of course:

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

Demo: http://plnkr.co/edit/m0hfHYy4LdBp7hjJd59U?p=preview

Answer 2

It is all about the class .hide . You must toggle it.

$(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");
        }
    });
});

You may want to check fiddler