write mouseout state within array of dynamic if else hover states

Question

I have a series of hover states called within an array where each unique item displays unique hover content (within same hover class. Styles the same, but content different.)

Update: Full JS below:

$('.meJane, .antarcticAntics, .pigeon, .marchOn, .nelson, .president, .owen, .tealBook, .children, .dot, .overlayContent').hover(function(){
    var location = $(this).offset();
    console.log('location: ', location);
    $('.overlayContent').css({'display': 'inline-block', 'height': ($(this).height()+'px'), 'width': ($(this).width()+'px'), 'top': (location.top - $('#schlMainContent').offset().top), 'left': (location.left - $('.classicBooks').offset().left)});
    $('.overlayContent', this).show();
    var bookName = $(this).attr('class');
    if (bookName == 'meJane') {
        // links for jane
        $('#previewLink').attr('class', 'play' + bookName);
        $('#shopLink').attr('href', 'http://www.uniquelink.com');
        $('.preview').click(function(){
            console.log('bookName: ', bookName);
            openPopUp(bookName);
        }); 
   } else if (bookName == 'antarcticAntics') {
        // links for antarcticAntics
        $('#previewLink').attr('class', 'play' + bookName);
        $('#shopLink').attr('href', 'http://www.uniquelink.com');
        $('.preview').click(function(){
            console.log('bookName: ', bookName);
            openPopUp(bookName);
        });
    } else if (bookName == 'pigeon') {
        // links for pigeon
        $('#previewLink').attr('class', 'play' + bookName);
        $('#shopLink').attr('href', 'http://www.uniquelink.com');
        $('.preview').click(function(){
            console.log('bookName: ', bookName);
            openPopUp(bookName);
        });
    } else if (bookName == 'marchOn') {
        // links for marchOn
        $('#previewLink').attr('class', 'play' + bookName);
        $('#shopLink').attr('href', 'http://www.uniquelink.com');
        $('.preview').click(function(){
            console.log('bookName: ', bookName);
            openPopUp(bookName);
        });
    } else if (bookName == 'nelson') {
        //links for nelson
        $('#previewLink').attr('class', 'play' + bookName);
        $('#shopLink').attr('href', 'http://www.uniquelink.com');
        $('.preview').click(function(){
            console.log('bookName: ', bookName);
            openPopUp(bookName);
        });
    } else if (bookName == 'president') {
        // links for president
        $('#previewLink').attr('class', 'play' + bookName);
        $('#shopLink').attr('href', 'http://www.uniquelink.com');
        $('.preview').click(function(){
            console.log('bookName: ', bookName);
            openPopUp(bookName);
        });
    } else if (bookName == 'owen') {
        // links for owen
        $('#previewLink').attr('class', 'play' + bookName);
        $('#shopLink').attr('href', 'http://www.uniquelink.com');
        $('.preview').click(function(){
            console.log('bookName: ', bookName);
            openPopUp(bookName);
        });
    } else if (bookName == 'tealBook') {
        // links for tealBook
        $('#previewLink').attr('class', 'play' + bookName);
        $('#shopLink').attr('href', 'http://www.uniquelink.com');
        $('.preview').click(function(){
            console.log('bookName: ', bookName);
            openPopUp(bookName);
        });
    } else if (bookName == 'children') {
        // links for children
        $('#previewLink').attr('class', 'play' + bookName);
        $('#shopLink').attr('href', 'http://www.uniquelink.com');
        $('.preview').click(function(){
            console.log('bookName: ', bookName);
            openPopUp(bookName);
        });
    } else if (bookName == 'dot') {
        // links for dot
        $('#previewLink').attr('class', 'play' + bookName);
        $('#shopLink').attr('href', 'http://www.uniquelink.com');
        $('.preview').click(function(){ // .preview is same as openPopup
            console.log('bookName: ', bookName);
            openPopUp(bookName);
        });
    } 

I need to add a mouseOut state because currently, the only way the hover state is removed is when you hover to next item. I need it to remove completely when you mouse out of that area in question. Any ideas how to incorporate return to normal state via mouseout().

Attempt, mouseleave:

$('.meJane, .antarcticAntics, .pigeon, .marchOn, .nelson, .president, .owen, .tealBook, .children, .dot, .overlayContent').on('mouseleave',function(){
    $('.overlayContent').css({'display': 'none'});

Attempt:

$( ".meJane, .antarcticAntics, .pigeon, .marchOn, .nelson, .president, .owen, .tealBook, .children, .dot, .overlayContent" ).off( "mouseleave" );
});

Also, tried adding another else at the end

    } else {
    $( ".meJane, .antarcticAntics, .pigeon, .marchOn, .nelson, .president, .owen, .tealBook, .children, .dot, .overlayContent" ).css({'display': 'none'});
    }
});

Answer 1

The .hover function actually accepts a second parameter that will be called on mouse out. Have a look at the following code:

$('.selectors').hover(function() {
    // mouse in
    $('.something').show();
}, function() {
    // mouse out
    $('.something').hide();
});

Have a look at the manual for more details: http://api.jquery.com/hover

And a very basic example to demonstrate: http://jsfiddle.net/j36mw6zr/