我是一个 javascript 新手,所以如果这个问题真的很基础,请原谅我。我在尝试做的事情上遇到了一个问题。
我在页面上有一张图片。
我想在图像顶部放置一个黑框(大概使用 CSS),即隐藏图像。
然后,使用 JavaScript,当鼠标移到黑色 CSS 框上时,黑色框淡出显示图像。
我知道如何使用 JavaScript 实现淡出效果,但我无法在图像顶部添加 CSS 框...
如果你能告诉我如何做到这一点,谢谢。
请注意,在我目前的努力中,我使用 CSS 创建了一个框,然后将图像添加到页面,但图像只是删除了 CSS 框。
最佳答案
我决定用 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 .
关于javascript - 将 CSS 框放在图像上,然后使用 JavaScript 将其删除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5891075/