jquery只會在

Question

中淡出一個課程中的一個項目我剛剛嘗試製作一個腳本，當您將鼠標懸停在鏈接，圖像等工具提示中時。一切正常，除了一次只有一個工具提示的實際淡入。如果不清楚我的意思：我想懸停圖像並在圖像上方顯示工具提示，則頁面上的所有其他工具提示均不可見。我知道我的錯誤是什麼（圖像的懸停會淡化所有工具提示，因爲它們都具有相同的類），但我不知道如何解決它。我希望我能正確解釋我的問題，如果有人能幫助我，我會很高興。 （請原諒我，如果我的英語不是最好的，這顯然不是我的母語）

這裏是我的代碼：

$(function() { 
 
$('.button').hover(function() { 
 
    $('.tooltip').stop().fadeTo("fast", 0.8); 
 
}, function() { 
 
    $('.tooltip').fadeTo("fast", 0.0); 
 
}); 
 
});

.wrapper{ 
 
    width:90px; 
 
    margin:auto; 
 
    margin-top:10%; 
 
} 
 

 
.tooltip{ 
 
    margin-left: auto; 
 
    margin-right:auto; 
 
    background-color:#34495e; 
 
    color:white; 
 
    border-radius:5px; 
 
    opacity:0.8; 
 
    padding:5px; 
 
    text-align: center; 
 
    font-size:15px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    display: block; 
 
    opacity:0.0; 
 
} 
 

 
.button img{ 
 
    margin-top:5px; 
 
    height:50px; 
 
    width: 50px; 
 
    display:block; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
} 
 

 
.button img:hover{ 
 
    cursor:pointer; 
 
}

<div class="wrapper"> 
 
    <div class="tooltip"> 
 
    189k Likes 
 
    </div> 
 
     <div class="button"> 
 
     <img src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Twitter_alt_3.png"/> 
 
     </div> 
 
</div> 
 
    
 
<div class="wrapper"> 
 
    <div class="tooltip"> 
 
    200 Followers 
 
    </div> 
 
     <div class="button"> 
 
     <img src="http://lakemacholidayparks.com.au/wp-content/uploads/2014/09/facebook-icon.png"/> 
 
     </div>

這裏是我的行動守則的jsfiddle。網： https://jsfiddle.net/3y8pcv69/

Answer 1

您選擇所有.tooltip那時你可以只選擇從button這是tooltip上一個元素。所以只是做：

$(function() { 
    $('.button').hover(function() { 
     $(this).prev('.tooltip').stop().fadeTo("fast", 0.8); 
    }, function() { 
     $(this).prev('.tooltip').fadeTo("fast", 0.0); 
    }); 
}); 

Fiddle