我只是试着做一个脚本,淡入一个工具提示当你悬停一个链接,图像等。一切都很好,除了实际淡入一次只有一个工具提示。如果不清楚我的意思:我想悬停图像并在图像上方显示工具提示,那么页面上的其他工具提示不应该是可见的。我知道我的错误是什么(图像的悬停褪去所有工具提示,因为它们都有相同的类),但我不知道如何修复它。我希望我正确地解释了我的问题,如果有人能帮助我,我将非常高兴。(如果我的英语不是最好的,请原谅,显然这不是我的母语)
下面是我的代码:$(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/
当您可以从button
中选择前一个元素(即tooltip
)时,您正在选择所有.tooltip
。所以请输入:
$(function() {
$('.button').hover(function() {
$(this).prev('.tooltip').stop().fadeTo("fast", 0.8);
}, function() {
$(this).prev('.tooltip').fadeTo("fast", 0.0);
});
});
小提琴