期望的效果:当用户将鼠标悬停在图像上时,图像(并且只有图像)应该变暗。
计划:使用 .mouseenter 和 JQuery 来实现想要的效果。
问题:当用户将鼠标悬停在图像上时,叠加层适用于其他内容 (#Bars),尽管对 .mouseenter 和附加叠加层使用相同的选择器。所以叠加层可以正常工作,但不适用于图像。我通过将覆盖图附加到正文来测试它,这确实有效(也就是说,当我将鼠标悬停在图像上时,网页的整个正文变暗)。我什至在导航栏上对其进行了测试,它再次起作用(当我将鼠标悬停在图像上时,导航栏变暗)。不幸的是,我想附加它的一件事,图像,不起作用。
尝试的解决方案:我已将 ID 添加到 ul、li、a 和 img,并且尝试选择其中的几种组合,但没有任何效果。我还尝试在 CSS 中为 #overlay 添加一个高 z-index,以防它低于图片。这没有用。
问题:我应该使用哪个选择器来达到预期的效果?
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;
}
最佳答案
关于jquery - 如何使用 JQuery 在图像上放置叠加层?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28568908/