如何透明懸停覆蓋添加到這些轉盤組合圖像

https://jsfiddle.net/dmaltron87/odpeLLv6/如何透明懸停覆蓋添加到這些轉盤組合圖像

試圖使它所以當我將鼠標懸停在圖片文字的簡單疊加出現，但我不能得到任何與此代碼工作。我在一個演示教程中發現了這個，併爲我的網站進行了編輯，但是我的JavaScript理解/技能仍然非常基礎。我對最終結果並不太挑剔，只想要想法。

嘗試了這樣的事情，並添加了一個CSS不透明= 0覆蓋，然後盤旋在.75。直截了當，但沒有工作。

<div class="container"> 
    <img src=".." alt="Avatar" class="image"> 
    <div class="overlay"> 
    <div class="text">Hello World</div> 
    </div> 
</div>

來源

2017-07-11 dmaltron87

你需要捕捉mouseenter()和mouseleave()事件，並添加一些動態內容。

下面是一個例子：

$(".carousel img").on("mouseenter", function() { 
 
    //start hover 
 
    let me = $(this); 
 
    let position = me.position(); 
 

 
    //create overlay 
 
    let overlay = $('<div class="overlay"></div>'); 
 

 
    //set position and size 
 
    overlay.css({ 
 
    left: position.left, 
 
    top: position.top, 
 
    height: me.height(), 
 
    width: me.width() 
 
    }); 
 

 
    //append overlay 
 
    me.after(overlay); 
 
}); 
 

 
//remove hover when the overlay is de-hovered 
 
$(".carousel").on("mouseleave", ".overlay", function() { 
 
    //end hover 
 
    $(this).remove(); 
 
});

.overlay { 
 
    background: url(http://via.placeholder.com/200x200/00AA00?text=Overlay) no-repeat center; 
 
    opacity: 0.7; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="carousel"> 
 
    <img src="http://lorempixel.com/200/200/sports/1/" /> 
 
    <img src="http://lorempixel.com/200/200/sports/2/" /> 
 
    <img src="http://lorempixel.com/200/200/sports/3/" /> 
 
</div>

來源

2017-07-11 17:24:41 dave

如何透明懸停覆蓋添加到這些轉盤組合圖像

回答

相關問題