Question

我需要在鼠标悬停时为文本设置动画。但是，每次从我的文本文件或数据库中出现不同的文本时。实际上，我想为我的网站编写相同的JavaScript代码。我已经尝试通过Inspect Element获取JavaScript代码。但是，它永远都行不通。

https://www.marieforleo.com/

我需要在我的网站上具有相同的效果 Click on Logo and See Text Effect

Answer 1

您可以使用基本的CSS和JavaScript来执行此操作，以根据需要设置不同的文本。

div span#initText {
display:inline;
}
div:hover span#initText {
display:none;
}
div span#hoverText {
display:none;
}
div:hover span#hoverText {
display:inline;
}

<div id="textBox">
  <span id="initText">initial text</span>
  <span id="hoverText">hover text</span>
</div>

Answer 2

如果您需要其他文本，则需要使用JavaScript。这是您可以做什么的示例：

const initValue = 'Hover me!';
const hoverValues = [
   'welcome',
   'to',
   'stack',
   'overflow'
];
const elt = document.querySelector('h1');
elt.onmouseover = () => elt.innerHTML = hoverValues[Math.floor(hoverValues.length*Math.random())];
elt.onmouseout = () => elt.innerHTML = initValue;

<h1>Hover me!</h1>

通过JavaScript在鼠标悬停时对文本进行动画处理

2 个答案: