在動態數組懸停狀態下寫入鼠標狀態

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/