Question

所需效果：当用户将鼠标悬停在图像上时，图像（以及仅图像）会变暗。

计划：使用.mouseenter和JQuery实现所需的效果。

问题：当用户将鼠标悬停在图像上时，覆盖图会应用于其他内容（#Bars），尽管对.mouseenter使用相同的选择器以及附加叠加层。因此叠加层可以正常工作，但它不适用于图像。我通过将叠加层附加到身体来测试叠加层，这确实有效（也就是说，当我将鼠标悬停在图像上时，整个网页的主体变暗）。我甚至在导航栏上进行了测试，再一次，它可以工作（当我将鼠标悬停在图像上时，导航栏会变暗）。不幸的是，我想要附加的一件事，即图像，并不起作用。

尝试过的解决方案：我已经为ul，li，a和img添加了ID，我尝试选择这些的几种组合，但没有任何效果。我还尝试在CSS中添加一个高z-index到#overlay，以防万一它低于图片。这没用。

问题：我应该使用哪个选择器来达到预期效果？

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;
}

Demo此处。

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);
}

如何使用JQuery在图像上放置叠加层？

2 个答案: