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>

DEMO： http://jsfiddle.net/4LjeL/111/

一切正常但我想添加一个额外的功能。当我在照片上悬停时，我想在照片上显示文字（带有动画和不透明度）。它应该也适用于移动设备..甚至可能吗？

Answer 1

使用CSS添加悬停效果可能相对简单，只需使用：

#foo: hover {}

然后你可以定义它在悬停时的作用。

然而，对于像动画和不透明以及移动支持这样的东西，可能值得研究JQueryUI，以及简单的JQuery来帮助你。

希望这有帮助！

在图片上添加悬停效果

1 个答案: