Is there an easier way to show/hide an element on a mouse action?

Question

I have this segment of code here, which I seem to use something similar all the time:

$(".fieldv").live('mouseenter', function() {
    $(this).children('.edit-icon').show();
}).live('mouseleave', function() {
    $(this).children('.edit-icon').hide();
});

Is there an easier, simpler, or cleaner way to show / hide an element on a mouse action whether it be hovering or clicking an element? Or something of the like...

Answer 1

Why use JavaScript?

You will need to hide the icon by default:

.fieldv .edit-icon { display: none; }

Then this CSS applies on hover (and ONLY on hover)

.fieldv:hover .edit-icon { display: block; /* or inline, etc. */ }

Answer 2

You could try this:

       $(".fieldv").hover(function(){

              //mouseover

       ,function(){

              //mouseout
       });

Answer 3

$(".fieldv").hover(function() {
        $(this).children('.edit-icon').show();
    }, function() {
        $(this).children('.edit-icon').hide();
 });

use $(".class").hover(function(){}, function(){});