아이콘 위로 마우스를 가져 가면 일부 텍스트에 전환 효과를 적용하는 방법은 무엇입니까?

Question

나는 웹 페이지를 디자인하고 있고 내가 좋아하는 (아무 자산도) 아이콘과 텍스트를 가지고있다.

아이콘 위로 마우스를 가져 가면 기본 텍스트가 다른 문구로 바뀝니다.하지만 갑자기 그럴 수 있기 때문에 기본 텍스트의 전환 효과를 설정할 수 있는지 궁금합니다. 내가 갖고있는 것을 방해하지 않는 CSS로 어떻게하는지 알아낼 수 없습니다.

여기에 지금까지 내 코드입니다 : 기본적으로 https://jsfiddle.net/67m5atwg/

, Icon1 (당신은 이미지 위에 마우스를 가져 가면)에 TBD에서 텍스트 변경, 나는 갑자기되는 대신에 걸쳐 페이드 텍스트를 싶을 때!

내 기존 JavaScript 코드로 수행 할 수 있습니까?

function setTextIcon1(){ 
    document.getElementById("maintext").innerHTML = "Icon1"; 

} 
function setTextIcon2(){ 
    document.getElementById("maintext").innerHTML = "Icon2"; 

} 
function setTextIcon3(){ 
    document.getElementById("maintext").innerHTML = "Icon3"; 

} 
function setTextDefault(){ 
    document.getElementById("maintext").innerHTML = "TBD"; 
} 

내가 CSS로 시도한 모든 것은 다른 것을 방해합니다. 아마 코드가 복잡해 졌을 것입니다. 유감스럽게 생각합니다.

감사합니다!

Answer 1

대신 스크립트

@font-face { 
 
    font-family: 'Medrano'; 
 
    src: url('medra.ttf'); 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
div.iconholder { 
 
    text-align: center; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 

 
img.icon { 
 
    height: 50px; 
 
    width: 50px; 
 
    padding: 15px; 
 
} 
 

 
.iconholder div { 
 
    font-family: 'Medrano', sans-serif; 
 
    color: gray; 
 
    font-size: 100px; 
 
    margin: 0; 
 
    vertical-align: middle; 
 
    width: 100%; 
 
    height: 120px; 
 
    order: -1; 
 
} 
 
.iconholder div div { 
 
    position: absolute; 
 
    top: 0; 
 
    height: auto; 
 
    width: 100%; 
 
} 
 

 
.hvr-grow { 
 
    display: inline-block; 
 
    margin: 5px; 
 
    -webkit-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -webkit-transition-duration: 0.3s; 
 
    transition-duration: 0.3s; 
 
    -webkit-transition-property: transform; 
 
    transition-property: transform; 
 
} 
 

 
.hvr-grow:hover, 
 
.hvr-grow:focus, 
 
.hvr-grow:active { 
 
    -webkit-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
} 
 

 
.maintext > div { 
 
    opacity: 0; 
 
    transition: opacity .8s; 
 
} 
 
.maintext .icon0 { 
 
    opacity: 1; 
 
} 
 
.iconholder a:hover ~ .maintext .icon0 { 
 
    opacity: 0; 
 
} 
 
#icon1:hover ~ .maintext .icon1, 
 
#icon2:hover ~ .maintext .icon2, 
 
#icon3:hover ~ .maintext .icon3 { opacity: 1; 
 
    transition: opacity .8s; 
 
}

<div class="iconholder"> 
 

 
    <a href="" id="icon1"> 
 
    <img class="hvr-grow" src="http://placehold.it/50" alt="Icon1" /> 
 
    </a> 
 
    <a href="" id="icon2"> 
 
    <img class="hvr-grow" src="http://placehold.it/50" alt="Icon2" /> 
 
    </a> 
 
    <a href="" id="icon3"> 
 
    <img class="hvr-grow" src="http://placehold.it/50" alt="Icon3" /> 
 
    </a> 
 

 
    <div class="maintext"> 
 
    <div class="icon0">TBD</div> 
 
    <div class="icon1">Icon 1</div> 
 
    <div class="icon2">Icon 2</div> 
 
    <div class="icon3">Icon 3</div> 
 
    </div> 
 

 
</div>

Answer 2

당신이 JQuery와 함께 할 수 있습니다

이

function setTextIcon1(){ 
    $('#maintext').fadeOut('slow', function() { 
     $(this).html('icon1'); 
     $(this).delay(300).fadeIn('slow'); 
    }); 
}