호버 효과가 배경 이미지와 내용을 바꾼다

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이 사용됩니다. 전환 : 모든 1s는 전환 효과가 모든 요소에 적용되어야하며 전환 소요 시간을 설정해야한다고 말합니다.

불투명도는 visibility : hidden/visible으로 사용되지만 전환 특성을 사용하려면 불투명도로 변경해야합니다.