Jquery 仅淡化 class 中的一项

Question

我刚刚尝试制作一个脚本，当您将鼠标悬停在 link、图像等时，它会在工具提示中淡入淡出。一切正常，除了一次只有一个工具提示实际淡入。如果不清楚我的意思：我想将图像悬停并在图像上方显示工具提示，页面上的所有其他工具提示都不应该可见。我知道我的错误是什么（图像的悬停会淡化所有工具提示，因为它们都具有相同的 class）但我不知道如何修复它。我希望我能正确解释我的问题，如果有人能帮助我，我会很高兴。（如果我的英语不是最好的，请原谅，这显然不是我的母语）

这是我的代码：

$(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.net 上的行动准则： https://jsfiddle.net/3y8pcv69/

Answer 1

当您可以 select 您的 button 中的前一个元素即 tooltip 时，您正在 select 处理所有 .tooltip。所以就这样做：

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

Fiddle

Jquery 仅淡化 class 中的一项

Jquery fade only one item of a class in

html

javascript

css

jquery

fadeto