javascript - 悬停显示文字时使图像变暗

我的网站中的某些图像在悬停时需要变暗，并且同时也要暴露在悬停之前隐藏的文本(该文本将显示在变暗图像的顶部)。

我已经以这种方式实现了img-darken部分-http://jsfiddle.net/4Dfpm/。

什么是实现“在悬停时显示文本(相同的悬停)”部分的好方法？
可以仅使用CSS来完成，还是这次我需要使用脚本？

谢谢。

** img暗化部分如何实现:

​

a.darken {
    background: black;
}

a.darken img {
    display: block;
    transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.7;
}

最佳答案

CSS解决方案

在您的jsfiddle上工作并更改了jsfiddle是http://jsfiddle.net/4Dfpm/55/

我在标记内添加了class = darken的

<span>text</span>

和更新的CSS是

a.darken{
...;
position:relative;
...
}

添加的新CSS是

a.darken span{position:absolute;top:5px;color:#000;left:10px}
a.darken:hover span{color:#fff;
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}