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

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

CSS 正如@Chien_Khmt所说：

＆＃13;

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

＆＃13;

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

＆＃13;

使该功能成为全局功能

要执行此操作，请将函数保存为全局变量，如

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

当然，对于2和3，您需要鼠标输出事件才能使div再次不透明

onmouseover javascript函数没有链接？

2 个答案: