悬停淡入淡出与多个div

所以我有一些div与IMG里面。 img上方是一个隐藏的div，但会出现在img的悬停位置。我知道如何使它工作，但我希望它变得更简单，这更适合我自己的学习。我希望它能像我一样工作，只是更简单和更清洁的jquery/javascript。悬停淡入淡出与多个div

$('#img-1').hover(function(){ 
    $('#overlay-1').stop().fadeToggle(400); 
}); 
$('#img-2').hover(function(){ 
    $('#overlay-2').stop().fadeToggle(400); 
});

这是它在行动：JsFiddle

来源

2017-04-07 Jiroscopes

$('.img').hover(function(){ 
    $(this).find('.overlay').stop().fadeToggle(400); 
});

的$（本）关键字是你打电话悬停（）上的对象。所以，我们发现（），这是与类徘徊的一回事儿.overlay

来源

2017-04-07 19:21:40 maembe

这对类很有用，它不会与ID一样工作的任何原因？ – Jiroscopes

@jiroscopes Ids是独一无二的。您不能/不应该多次使用相同的ID。 – maembe

你可以用纯CSS上.overlay

.img { 
 
    position: relative; 
 
} 
 
.img > img { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.overlay { 
 
    background-color: #f7c845; 
 
    z-index: 100; 
 
    position: absolute; 
 
    height: 200px; 
 
    width: 200px; 
 
    opacity: 0; 
 
    transition: opacity .4s; 
 
} 
 
.overlay > p { 
 
    text-align: center; 
 
    color: #212121; 
 
    padding: 20px 40px; 
 
} 
 
.img:hover .overlay { 
 
    opacity: 1; 
 
}

<div class="img" id="img-1"> 
 
    <div class="overlay" id="overlay-1"> 
 
    <p>Hello World!</p> 
 
    </div> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/bf/4e/40/bf4e4067252227bd3f758bba7dcee2ff.jpg" alt="image"> 
 
</div> 
 
<div class="img" id="img-2"> 
 
    <div class="overlay" id="overlay-2"> 
 
    <p>Hello World!</p> 
 
    </div> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/bf/4e/40/bf4e4067252227bd3f758bba7dcee2ff.jpg" alt="image"> 
 
</div>

做到这一点，利用 :hover上 .img和 transition与 opacity

来源

2017-04-07 19:26:14

我知道我可以用CSS做到这一点，但我期待在Jquery中找到用于学习目的的答案。谢谢！ – Jiroscopes

悬停淡入淡出与多个div

回答

相关问题