这是我的第一篇文章,所以如果我在发帖格式或其他方面有点偏差,请原谅我。因此,我正在为一个游戏团队编写一个网站,他们希望他们的名单(其中有包含玩家姓名的框)能够展开,并在您将鼠标悬停在名称上时提供一些信息。我已经让它扩展和更改文本,但看起来有点唐突。有没有办法让文字变化更流畅?我不能为每一个都有一个单独的 CSS,因为至少有 20 个。到目前为止我的进展如下。提前致谢!
function replace(element, replacement) {
element.innerHTML = replacement;
}
function unreplace(element, replacement) {
element.innerHTML = replacement;
}
.box {
background-color: #81C441;
display: inline-block;
margin: 0px 10px;
text-align: center;
line-height: 180px;
width: 200px;
height: 180px;
margin-bottom: 20px;
font-family: arial;
transition: 1s;
transform: scale(1.0);
}
.box:hover {
transition: 1s;
transform: scale(1.1);
}
<div class="boxcontainer">
<div onmouseover="replace(this, 'ROLE')" onmouseout="unreplace(this, 'NAME')" class="box w3-center w3-animate-top">NAME</div>
</div>
最佳答案
您无法(轻松)对内容
进行动画更改 - 例如,您无法对font-family
进行动画制作,逻辑相同。
但是,您可以重叠两个文本,只需将鼠标悬停在父元素上而不使用 JS 即可更改它们的属性。
包含演示。
.wrapper {
position: relative;
}
.toHide, .toShow {
transition: opacity 1s ease-in-out;
position: absolute;
}
.toShow {
opacity: 0;
}
.wrapper:hover .toHide {
opacity: 0;
}
.wrapper:hover .toShow {
opacity: 1;
}
<div class="wrapper">
<span class="toHide">NAME</span>
<span class="toShow">POSITION</span>
</div>
<br>
<div class="wrapper">
<span class="toHide">NAME</span>
<span class="toShow">POSITION</span>
</div>
<br>
<div class="wrapper">
<span class="toHide">NAME</span>
<span class="toShow">POSITION</span>
</div>
<br>
<div class="wrapper">
<span class="toHide">NAME</span>
<span class="toShow">POSITION</span>
</div>
关于javascript - 如何使用innerHTML 使文本过渡平滑,并在更改时淡入/淡出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54584792/