javascript - 将 CSS 框放在图像上，然后使用 JavaScript 将其删除

Question

我是一个 javascript 新手，所以如果这个问题真的很基础，请原谅我。我在尝试做的事情上遇到了一个问题。

我在页面上有一张图片。

我想在图像顶部放置一个黑框(大概使用 CSS)，即隐藏图像。

然后，使用 JavaScript，当鼠标移到黑色 CSS 框上时，黑色框淡出显示图像。

我知道如何使用 JavaScript 实现淡出效果，但我无法在图像顶部添加 CSS 框...

如果你能告诉我如何做到这一点，谢谢。

请注意，在我目前的努力中，我使用 CSS 创建了一个框，然后将图像添加到页面，但图像只是删除了 CSS 框。

Answer 1

我决定用 JavaScript 添加黑色封面。这样，禁用 JavaScript 的用户仍然可以看到您的图像。

HTML

<div id="container">
   <img src="path/to/your/image.png" alt="Hello" />
</div>

CSS

#container {
   position: relative;   
}

#container div {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background: #000;
}

jQuery

$(function() {
    var container = $('#container'),
        div = $('<div />').appendTo(container);

    container.hover(function() {
        div.fadeOut(500);
    }, function() {
        div.fadeIn(500);
    });
});

jsFiddle .