javascript - 我创建了一个脚本来放大文本 onmouseover 但无法让事件监听器工作

Question

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

我是否需要一个单独的类并将动画恢复到正常大小？是什么让代码出错？

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 更轻松地创建相同的效果。只需在创建 anchor 时添加一个类(您可以在 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 做同样的事情