javascript - 返回元素 onmouseover

Question

我想在悬停时修改一个元素，这不能用 css 完成，因为我想使用计时器来增加悬停元素的嵌入阴影。

所以我在javascript中尝试了这个函数：

var element;

function hover(hoveredElement)
{
   element = hoveredElement;
   setInterval(changeBack, 100);
}

function changeBack()
{
  element.style.boxShadow = .... ;
}

html:

<li class="span1" id="s1_1" onmouseover="hover(this.id);">...</li>

但是我收到一个错误，说该元素未定义。任何其他方式来传递 id，只使用 JavaScript？

Answer 1

onmouseover当它应该传递对元素本身的引用时，您的内联正在传递元素的 id。尝试这个：

onmouseover="hover(this);"

此外，您还可以选择消除全局element变量：

function hover(hoveredElement) {
   setInterval(function() {
      hoveredElement.style.boxShadow = .... ;
   }, 100);
}

或者，如果您想将其他功能分开：

function hover(hoveredElement){
   setInterval(function(){ changeBack(hoveredElement); }, 100);
}

function changeBack(element){
   element.style.boxShadow = .... ;
}

无论哪种方式都意味着您可以将 应用于onmouseover="hover(this);"多个元素，而无需它们共享相同的全局element变量。