如何将鼠标悬停在图标上时将过渡效果应用于某些文本？

Question

我正在设计一个网页，并且有我喜欢的图标和文字（没有资产）。

我有它设置所以当我将鼠标悬停在一个图标上时，它会将主文本更改为另一个短语，但它会突然显示，我想知道我是否可以为主文本设置过渡效果，因为我可以＆＃ 39;弄清楚如何使用不会干扰我所拥有的CSS来实现它。

到目前为止，我的代码是：https://jsfiddle.net/67m5atwg/

基本上，当文本从TBD变为Icon1时（当您将鼠标悬停在图像上方时），我希望该文本淡出而不是突然！

可以使用我现有的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

你可以用JQuery做到这一点：

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

Answer 2

你可以做这样的事情，而不是使用脚本

＆＃13;

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;