懸停淡入淡出與多個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

回答

相關問題