onmouseover javascript函数无法链接？

Question

我想在用户将鼠标悬停在其上时更改其不透明度。 到目前为止，这就是我所拥有的。

这是链接在头部的脚本。

<head>
    <link href="styling/index.css" rel="stylesheet">
    <link href="styling/navbar.css" rel="stylesheet">
    <script type="text/javascript" src="timeline.js"></script>
</head>

这是我要更改的分隔线

<div onmouseover="twosix()" class="circle hover" id="2006">
    <h2 id="date">2006</h2>
</div>

这是javascript函数

function twosix(){
    document.getElementById("2006").style.opacity = "0";
}

该javascript文件称为“ timeline.js”。 我对自己做错的事情很困惑。 提前致谢：）

Answer 1

很简单，您可以使用我的课程

 #div:hover { opacity:0 }

 <div id="div"> AAA</div>

Answer 2

有3种方法可以做到这一点

@Chien_Khmt说的CSS：

 .circle.hover:hover { opacity: 0; }

 <div class="circle hover" id="2006"> <h2 id="date">2006</h2> </div>

使函数成为全局函数

为此，您可以将函数保存到这样的全局变量中

 twosix = function() { document.getElementById("2006").style.opacity = "0"; }

 <div onmouseover="twosix()" class="circle hover" id="2006"> <h2 id="date">2006</h2> </div>

使用事件侦听器这意味着您不必将其设置为全局变量

 document.getElementById("2006").addEventListener("mouseover", function() { twosix() }); function twosix() { document.getElementById("2006").style.opacity = "0"; }

 <div class="circle hover" id="2006"> <h2 id="date">2006</h2> </div>

当然，对于2和3，您需要一个mouse out事件来使div再次不透明

onmouseover javascript函数无法链接？

问题描述

2 个解决方案

解决方案1
1 2017-03-02 15:42:17

解决方案2
-1 2017-03-02 15:50:31

onmouseover javascript函数无法链接？

问题描述

2 个解决方案

解决方案1 1 2017-03-02 15:42:17

解决方案2 -1 2017-03-02 15:50:31

解决方案1
1 2017-03-02 15:42:17

解决方案2
-1 2017-03-02 15:50:31