Combining jquery for effiency

Question

Attempting to condense some of the coding on a website I'm now looking after and was wondering if there is a more efficient way of writing the following coding as I realise there is doubling up of information.

$("span.menu-link-title.active-components").mouseover(function(){$('#active-components-image').css('display', 'block');});
$("span.menu-link-title.active-components").mouseleave(function(){$('#active-components-image').css('display', 'none');});
$("span.menu-link-title.adaptors").mouseover(function(){$('#adaptors-image').css('display', 'block');});
$("span.menu-link-title.adaptors").mouseleave(function(){$('#adaptors-image').css('display', 'none');});

Answer 1

You can use hover and toggle methods:

$("span.menu-link-title.adaptors").hover(function(){
   $('#adaptors-image').toggle();
});

hover is a shorthand for mouseenter(not mouseover) and mouseleave events and it also accepts 2 functions. You can also cache the objects.

var $adapt = $('#adaptors-image');
$("span.menu-link-title.adaptors").hover(function(){
    $adap.show(); // mouseenter
}, function(){
    $adap.hide(); // mouseleave
});

Answer 2

This might be a little more lean:

$("span.menu-link-title.active-components").hover(function() {
    $('#active-components-image').toggle();
});
$("span.menu-link-title.adaptors").hover(function() {
    $('#adaptors-image').toggle();
});​