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

Answer 2

您可以尝试使用CSS z-index。 See here。请注意position:absolute是必不可少的。

这是一种做法。我认为它可能有用。

底层图片。
图片层顶部的框。
JS淡出盒子。

Answer 3

我创建的here a sample正是您所描述的。

它会使用名为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);
        });
    });
});

Answer 4

我建议将图像淡入带有黑色背景的div，其中包含从头开始的图像。

Answer 5

将图像放入div：

background: black;

图像的css是（处于正常状态）：

visibility: hidden;

并使用js，在您想要的事件中更改图像的可见性。

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

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

将CSS框放在图像上，然后用JavaScript删除它

5 个答案:

HTML

CSS

的jQuery