Question

我正在尝试创建自己的网站，该网站的中心带有一个引号：
“欢迎使用我的网站” ，当您将鼠标悬停在菜单选项上时，报价应该会发生变化。
例如：如果我将鼠标悬停在关于上，它可能会说：“这是我的关于我的页面” 。（该示例明显简化了。）

HTML代码段：

<a href="#" class="titleAbout">About</a>
<a href="#" class="titleContact">Contact</a>
<a href="#" class="titleHome">Home</a>
<div>
<p>
Welcome to my Website!
</p>
</div>

CSS片段：

.fade { 
  animation: fadein 2s;

}
@keyframes fadein {
  from {
    opacity:1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity:1;
  }
}

JS代码段

let myP = document.querySelector('p');
let titleWords = document.querySelector('a.titleAbout');

titleWords.addEventListener('mouseenter', function(){
    myP.classList.add("fade");
setTimeout(function(){
        myP.innerHTML = "This is my about Me page";
        }, 1000);
setTimeout(function(){
            text.classList.toggle("fade");
        }, 2000);
    });

titleWords = document.querySelector('a.titleContact');

titleWords.addEventListener('mouseenter', function(){
    myP.classList.add("fade");
setTimeout(function(){
        myP.innerHTML = "This is my Contact page";
        }, 1000);
setTimeout(function(){
            text.classList.toggle("fade");
        }, 2000);
    });

但是-仅在我第一次将鼠标悬停在菜单项上时，它才能正确地淡入，而其他时候它会更改innerHTML，但不会进出淡出。

为什么会发生这种情况？我该如何解决？

Answer 1

您尚未在JavaScript中定义text变量。我认为您的意思是myP.classList.toggle("fade");

let myP = document.querySelector('p');
let titleWords = document.querySelector('a.titleAbout');

titleWords.addEventListener('mouseenter', function(){
    myP.classList.add("fade");
setTimeout(function(){
        myP.innerHTML = "This is my about Me page";
        }, 1000);
setTimeout(function(){
            myP.classList.toggle("fade");
        }, 2000);
    });

titleWords = document.querySelector('a.titleContact');

titleWords.addEventListener('mouseenter', function(){
    myP.classList.add("fade");
setTimeout(function(){
        myP.innerHTML = "This is my Contact page";
        }, 1000);
setTimeout(function(){
            myP.classList.toggle("fade");
        }, 2000);
    });

.fade { 
  animation: fadein 2s;

}
@keyframes fadein {
  from {
    opacity:1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity:1;
  }
}

<a href="#" class="titleAbout">About</a>
<a href="#" class="titleContact">Contact</a>
<a href="#" class="titleHome">Home</a>
<div>
<p>
Welcome to my Website!
</p>
</div>

Answer 2

您可以缩短操作时间，而无需使用setTimeout：

let myP = document.querySelector('p');

function show(textToShow){
  myP.innerHTML = textToShow;
  myP.classList.add("fade");
}

function hide(){
 myP.classList.remove("fade");
}

.fade { 
  animation: fadein 3s;

}
@keyframes fadein {
  from {
    opacity:1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity:1;
  }
}

<a href="#" class="titleAbout" onmouseenter="show('This is my about Me page')" onmouseout="hide()">About</a>
<a href="#" class="titleContact" onmouseenter="show('This is my contact Me page')" onmouseout="hide()">Contact</a>
<a href="#" class="titleHome">Home</a>
<div>
<p>
Welcome to my Website!
</p>
</div>

Answer 3

我已经将您的代码重构为一个更通用的版本，因此您可以根据需要拥有任意数量的链接，而无需重复代码。它以标签中的title属性作为文本。也许这表现得更像您预期的那样，您可以解决该超时问题。

const myPContainer = document.getElementById('pContainer');
const titleWords = document.querySelectorAll('a');
let i;

function attachHandlers(i, elem) {
  let timeoutHandle;
  const pElem = document.createElement('p');
  pElem.innerHTML = elem.getAttribute('title');
  myPContainer.appendChild(pElem);

  elem.addEventListener('mouseenter', function(){
    timeoutHandle = null;
    pElem.classList.add("fadein");
  });

  elem.addEventListener('mouseleave', function(){
    // timeoutHandle = setTimeout(() => {
      pElem.classList.remove("fadein");
    // }, 2000);
  });
  
}

for (i = 0; i < titleWords.length; ++i) {
  attachHandlers(i, titleWords[i]);
}

#pContainer {
  position: relative;
  height: 20px;
}
#pContainer p {
  position: absolute;
  display: block;
  opacity: 0;
}
.fadein { 
  animation: fadein 2s;
  display: block;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<a href="#" class="titleAbout" title="This is my about Me page">About</a>
<a href="#" class="titleContact" title="This is my Contact page">Contact</a>
<a href="#" class="titleHome" title="This is my Home page">Home</a>
<div id="pContainer"></div>

多次使用Fade Javascript更改文本

3 个答案: