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

我是javascript新手，所以如果这个问题真的很基本，请原谅我。我有一个问题，就是我想做什么

我在页面上有一个图像

我想在图像上方放置一个黑框（大概使用CSS），即隐藏图像

然后，使用JavaScript，当鼠标移动到黑色CSS框上时，黑色框逐渐消失，显示图像

我知道如何使用JavaScript进行淡出，但在图像顶部设置CSS框时遇到了问题

谢谢你告诉我怎么做

---

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

我建议将一个图像淡入一个div，该div的黑色背景从一开始就包含该图像。

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

HTML jQuery

$（函数（）{
var container=$（“#container”），
div=$（''）.appendTo（容器）；
container.hover（函数（）{
衰减分区（500）；
}，函数（）{
法丹分区（500）；
});
});

---

.

您可以尝试使用CSS z索引。请注意

位置：绝对
是必需的

这里有一种方法。我想这可能有用

图像在底层
图像层顶部的框
JS到淡入淡出框
我完全按照你描述的那样创造

它使用名为
do fade
的类在所有图像上自动创建黑盒。没有它的图像将继续工作而不进行更改

完成所有工作的jQuery：

$(document).ready(function() {
    $("img.do-fade").each(function () {
        var t = $(this);
        var d = $('<div class="black-box"></div>').insertAfter(this);
        d.css({ width: t.width(), height: t.height(), top: t.position().top });
        d.bind("mouseenter", function() {
            $(this).fadeTo("normal", 0);
        }).bind("mouseleave", function() {
            $(this).fadeTo("fast", 1);
        });
    });
});

$（文档）.ready（函数（）{
$（“img.do fade”）。每个（函数（）{
var t=$（本）；
var d=$（''）.insertAfter（this）；
d、 css（{width:t.width（），height:t.height（），top:t.position（）.top}）；
d、 绑定（“mouseenter”，函数（）{
$（此）.fadeTo（“正常”，0）；
}).bind（“mouseleave”，函数（）{
美元（这一点）。法代托（“快速”，1）；
});
});
});
将图像放入具有以下内容的div中：

background: black;

图像的css是（在正常状态下）：

使用js，可以根据需要更改图像的可见性

..或者您只能尝试使用css：

div.container{
    background: black;
}
image{
    visibility: hidden;
}
image:hover{
    visibility: visible;
}

您是否使用库进行淡入淡出？如果您使用的是jQuery之类的工具，那么我可以为您提供比直接使用CSS更好的答案。@Levi Morrison谢谢。我在常规JavaScript中做了一个淡入淡出（实际上，这是一个上卷），但我很想听听您的jQuery解决方案……@alex:Oops，我错过了这一点。：）是的，如果jQuery被允许，这就是我要做的。速度令人赞叹。@Alex我希望网站上会有多张图片发生这种情况，但当我滚动其中一张图片时，我不希望其他黑匣子发生变化。有没有一种简单的方法可以做到这一点，而不给每个单独的容器名，也不让同一个函数有多个不同容器名的副本？@Michael，看看我的答案。@Alex很抱歉让我碰运气，但是有可能让这些框有不同的颜色吗？这正是我需要的，因为有多个图像。然而，我希望盒子是不同的颜色。“这可能吗？”迈克尔，如果这正是你需要的，为什么这不是公认的答案？事实上，如果你还需要什么，尽管说吧。这不是公认的答案，因为我已经接受了另一个答案，然后我看到了这个。我本来打算让这个答案成为被接受的答案，但后来我接受答案的人也更新了他的答案（我在给你的答案写评论后注意到了），以反映我不断变化的需求，所以我觉得从他那里拿走这个答案很糟糕。很抱歉
$(document).ready(function() {
    $("img.do-fade").each(function () {
        var t = $(this);
        var d = $('<div class="black-box"></div>').insertAfter(this);
        d.css({ width: t.width(), height: t.height(), top: t.position().top });
        d.bind("mouseenter", function() {
            $(this).fadeTo("normal", 0);
        }).bind("mouseleave", function() {
            $(this).fadeTo("fast", 1);
        });
    });
});

background: black;

visibility: hidden;

div.container{
    background: black;
}
image{
    visibility: hidden;
}
image:hover{
    visibility: visible;
}