在动态数组悬停状态下写入鼠标状态

Question

我有一系列在阵列中调用的悬停状态，其中每个唯一项目显示唯一的悬停内容（在同一个悬停类中，样式相同，但内容不同）

更新：下面全JS：

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

我需要添加一个鼠标移开状态，因为目前，悬停状态被删除的唯一方法是，当你将鼠标悬停到下一个项目。当你将鼠标移出该区域时，我需要将其完全移除。任何想法如何通过mouseout().

尝试纳入回归到正常状态，鼠标离开：

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

尝试：

此外，尝试添加另一否则在最后

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

Answer 1

.hover函数实际上接受将在鼠标外调用的第二个参数。看看下面的代码：

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

看一看手册了解更多详情：http://api.jquery.com/hover

和一个非常基本的例子来说明：http://jsfiddle.net/j36mw6zr/