javascript - 在图片上添加悬停效果

Question

这是我的代码:

CSS

 .obrazkii img {
            width: 25%;
            float: left;
        }
@media screen and (max-width: 1180px) {
    .entry-content {
        width: 100% !important;
    }
}
@media screen and (max-width: 885px) {.obrazkii img {
            width: 50%;
            float: left;
        }}
@media screen and (max-width: 590px) {.obrazkii img {
            width: 100%;
            float: left;
        }}

HTML

            <div>
                  <div class="obrazkii">
        <span><a href="#"><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></a></span>
        <span><a href="#"><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></a></span>
        <span><a href="#"><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></a></span>
        <span><a href="#"><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></a></span>
                  </div>
                  <div class="obrazkii">
   <span><a href="#"><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></a></span>
        <span><a href="#"><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></a></span>
        <span><a href="#"><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></a></span>
        <span><a href="#"><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></a></span>
                  </div>
                </div>

演示: http://jsfiddle.net/4LjeL/111/

一切正常，但我想添加一个额外的功能。当我将鼠标悬停在照片上时，我想在照片上显示文字(带有动画和不透明度)。它也应该可以在移动设备上使用。这有可能吗？

Answer 1

使用 CSS 添加悬停效果相对容易，只需使用:

#foo: hover {}

然后您可以定义它在悬停时执行的操作。

但是，对于诸如动画和不透明度以及移动支持之类的事情，可能值得研究一下 JQueryUI 和纯 JQuery 来帮助您。

希望这对您有所帮助!