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

How to apply a transition effect to some text when hovering over an icon?

本文关键字：过渡效果 应用于 文本 悬停 鼠标 图标      更新时间：2023-09-26

我正在设计一个网页，并且已经得到了我喜欢的图标和文本（还没有资产）。

我已经设置好了，所以当我把鼠标悬停在一个图标上时，它会把主文本更改为一个不同的短语，但它突然改变了，我想知道我是否可以为主文本设置一个过渡效果，因为我不知道如何用不干扰我现有内容的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所做的一切都会干扰其他东西。我的代码可能真的很复杂，对此我很抱歉，因为我对这一切都很陌生！

谢谢！

您可以这样做，而不是使用脚本

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

您可以使用JQuery:

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