Question

我想要实现的是在鼠标悬停时使图像淡入以便文本可见 - 图像是（例如）cd封面，当鼠标指针放在图像上时，它应该淡入到显示专辑的曲目列表。每个曲目列表都是指向youtube上曲目的超链接。

我没有jquery的经验，所以我希望用javascript做到这一点。

我非常感谢任何帮助，因为我花了大约两天时间尝试谷歌答案。

Answer 1

如果在“淡入淡出”下你的意思是动画，试试这个：

function SetObjectOpacity(obj, op, op100)
{
    obj.style.opacity = op.toString();
    obj.style["-moz-opacity"] = op.toString();
    obj.style["filter"] = "alpha(opacity=" + op100 + ")";
}

function FadeImage(imageid)
{
    var framedelay = 50;
    var frame = 0, img = document.getElementById(imageid), animint;
    animint = setInterval(function() {
        frame++;
        SetObjectOpacity(img, frame / 20, frame * 5);
        if (frame == 20) {
            img.style.visibility = 'hidden';
            clearInterval(animint);
        }
    }, framedelay);
}

在HTML代码中：

<div style="width: 200px; height: 200px; position: relative;">
    <div style="position: absolute; top: 0; left: 0; width: 200px; height: 200px;">
        text you want to show
    </div>
    <img src="yourimage.jpg" id="yourimage" onMouseOver="FadeImage('yourimage');" style="position: absolute; top: 0; left: 0;">
</div>

退回鼠标很明显。

Answer 2

我确实建议您使用jQuery - 它使一切变得如此简单。而且这并不困难。毕竟，我们为您准备了代码（我很乐意进一步解释），所以您需要做的就是包含它。

因此，假设您使用jQuery，请尝试this：

$(".overlay").hover(function(){
    $(this).stop().fadeTo(300,0.8);   
},function(){
    $(this).stop().fadeTo(300,0);
});

这是你的HTML / CSS：

<div class="container">
    <img src="http://placehold.it/200/200" />
    <div class="overlay">
        <a href="#">Hi</a><br>
        <a href="#">Hi</a><br>
        <a href="#">Hi</a><br>
    </div>
</div>

.overlay {
    position:absolute;
    margin-top:-205px;
    width:200px;
    height:200px;
    background-color:black;
    opacity:0;
}

如何淡化背景图像，以便链接/文本可见？

2 个答案: