返回元素 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 变量。