hover - 使用javascript的鼠标悬停效果

Question

我正在练习事件处理程序，但我似乎无法弄清楚如何在 lol.garena.ph 网站上使用 javascript 制作类似的 mouseHover 效果（主页、新闻、指南等。导航按钮）。请帮帮我。

Answer 1

基本上，你将不得不.hover上课：

.hover {
    position: relative;
    top: -5px; /* this will raise the element */
}

el然后使用 javascript将类添加到您的元素（带有 id ）：

<li onmouseover="this.className='hover';" onmouseout="this.className='';">Home</li>

当然，这只是原理。查看一个工作示例：http: //jsfiddle.net/KbcPb/

但是你可以用 css 来做：http: //jsfiddle.net/42jLY/

Answer 2

我正在使用它来完成我的任务。它会让它看起来像一个 CSS 悬停效果。

在 HTML 代码中：

<h1 id="titleRegister" onmouseover="changeToBlueColor()" onmouseout="changeToBlackColor()"> Register </h1>

对于 javascript 中的函数：

<script>
function changeToBlueColor(){
  document.getElementById("titleRegister").style.color = "blue";
}
function changeToBlackColor(){
  document.getElementById("titleRegister").style.color = "black";
}
</script>