悬停效果改变背景图像和内容答案

【问题标题】：hover effect changing background image and content悬停效果改变背景图像和内容
【发布时间】：2014-05-13 17:41:44
【问题描述】：

我是 haml/css 的新手，我想知道是否可以执行以下操作：有一个带有字体真棒图标的图像。然后，在悬停效果上，更改图像并显示一些文本，而不是图标。该图像可以被视为背景图像，但我无法弄清楚其余的。

哈姆：

.feature
      #dot
        %i.fa.fa-list-ul

css:

#dot{
    display: inline-block;
    background-image: url(../assets/blue.png);
    width: 29%;
    height: 102px;
}

#dot:hover{
    background: url(../assets/hover.png);
}

这只是解决了悬停效果的一部分，但它没有显示我的图标。我什至没有从悬停上的文字开始

【问题讨论】：

给出一些你完全试过的代码
我已经编辑了我的问题
能否给我们提供一个演示？
我已经修好了。由于我的声誉得分，我只是等到明天再发布它。

标签： css haml font-awesome

【解决方案1】：

嗯..我修复了它做以下事情（以防其他人感兴趣）

这是我的哈姆：

.dot
        %i.fa.fa-list-ul
        .read_more Text on hover

这是我的 CSS：

.dot{
    display: inline-block;
    background-image: url(../assets/blue.png);
    width: 29%;
    height: 102px;
    -moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -webkit-transition: all 1s;
    transition: all 1s;
}
.dot i{
    opacity: 1;
    -moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -webkit-transition: all 1s;
    transition: all 1s;
}
.dot .read_more{
    opacity: 0;
    -moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -webkit-transition: all 1s;
    transition: all 1s;
}

.dot:hover{
    background: url(../assets/hover.png);
    -webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -moz-transition: all 1s;
    transition: all 1s;
    cursor: pointer;
}

.dot:hover i{
    opacity: 0;
    -moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -webkit-transition: all 1s; 
    transition: all 1s;
}

.dot:hover .read_more{
    opacity: 1;
    -moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -webkit-transition: all 1s;
    transition: all 1s;
}

使用 -moz 和 -webkit 是为了在所有浏览器上得到支持。过渡：全 1，表示过渡的效果应该适用于所有元素，并且时间设置它需要多长时间才能进行过渡。

不透明度仅用作可见性：隐藏/可见，但为了使用过渡属性，必须将其更改为不透明度。

【讨论】：