Question

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

HAML：

.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);
}

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

Answer 1

嗯..我修复了以下内容（如果有人感兴趣的话）

这是我的haml：

.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，表示过渡的效果应该适用于所有元素，时间设置为过渡所需的时间。

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

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

1 个答案: