我创建了一个脚本来放大鼠标悬停时的文本，但无法让事件侦听器工作

Question

我写了一些Javascript来尝试放大我的锚文本列表，当它们悬停在文本上时，它们的大小会增加，当它们没有悬停时，它们会恢复到正常大小。

我是否需要一个单独的类，其中包含恢复为正常大小的动画？ 是什么让代码出错了？

const numHeaderAnchors = 5;
const numFooterAnchors = 3;
var anchorsAll = document.getElementsByTagName("a");
var anchorsInList = [];
var count = 0;
for(var i = numHeaderAnchors; i < document.anchors.length - numFooterAnchors; i++){
    anchorsInList[count] = anchorsAll.item(i);
    console.log(anchorsInList[count].text);
    count++;
}
function zoomLetters(numAnchor){
    anchorsInList[numAnchor].classList.add("zoom");
}
function deZoomLetters(numAnchor){
    anchorsInList[numAnchor].classList.remove("zoom")
}
for(var i = 0; i < anchorsInList.length;i++){
    anchorsInList[i].addEventListener(onmouseover, zoomLetters(i));
    anchorsInList[i].addEventListener(onmouseout, deZoomLetters(i));
}

这是我的 CSS 过渡类。

.zoom {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    font-size: 3em;
 }

感谢您的帮助！

Answer 1

你可以用基本上是纯HTML和CSS更容易地创建相同的效果。只需在创建锚点时添加一个类(您可以在 for 循环中执行此操作，只需向该 HTML 元素添加一个class="zoom"即可。

然后在 CSS 中，您可以利用如下:hover：

.zoom {
   font-size: 3em;
}
.zoom: hover {
   -webkit-transition: 1s;
   -moz-transition: 1s;
   -ms-transition: 1s;
   -o-transition: 1s;
    transition: 1s;
    font-size: 6em;
}

你可以用a: hover做同样的事情