如何使用JQuery在圖像上放置疊加層？

Question

所需效果：當用戶將鼠標懸停在圖像上時，圖像（僅圖像）應變暗。

計划：將.mouseenter與JQuery結合使用以實現所需的效果。

問題：當用戶將鼠標懸停在圖像上時，盡管.mouseenter和附加疊加層都使用了相同的選擇器，但疊加層仍適用於其他內容（#Bars）。 因此，疊加層可以正常工作，但不適用於圖像。 我通過將疊加層附加到主體上來對其進行了測試，這確實有效（也就是說，當我將鼠標懸停在圖像上時，整個網頁的主體變暗了）。 我什至在導航欄上對其進行了測試，然后再次正常工作（當我將鼠標懸停在圖像上時，導航欄變暗）。 不幸的是，我想附加到圖像上的一件事不起作用。

嘗試的解決方案：我已將ID添加到ul，li，a和img中，並且我嘗試選擇這些ID的幾種組合，但沒有任何效果。 我還嘗試在CSS中向#overlay添加高z索引，以防萬一它比圖片低。 這沒用。

問題：應該使用哪個選擇器來達到預期的效果？

html.erb

<ul id="Bars">
    <li id="bar1photo" class="barphoto"><%= link_to(image_tag("bar1.jpg", id: "bar1image"), bar1_path, id: "bar1") %></li>
    <li id="bar2photo" class="barphoto"><%= link_to(image_tag("bar2.jpg", id: "bar2image"), bar2_path, id: "bar2") %></li>
<ul>

jQuery查詢

$(document).ready(function(){
    var $overlay = $('<div id="overlay"></div>');
    $("li#bar1photo a")
        .mouseenter(function(){

            $("li#bar1photo a").append($overlay.show());

        })
        .mouseleave(function(){
            $overlay.hide();
        });
});

的CSS

#overlay {
    background: rgba(0,0,0, 0.75);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

Answer 1

父母需要一個relative位置。

.barphoto {
 position: relative;
}

演示在這里。

Answer 2

我該那樣做：

$("li#bar1photo a").on('mouseover',function(){
  $(this).parent("li").addClass('overlay');
});

和CSS這樣的東西：

.overlay {
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0, 0.75);
}