Question

此处，team_hover()是onmouseover事件，team_hover_bbye()是onmouseout事件。 team_hover()运行正常，但当我从元素team_hover_bbye()中删除鼠标时会执行但gl2的显示属性不会变为空....

我想在移除鼠标时将gl2的显示属性更改为无。

P.S这是我的第一篇帖子..

＆＃13;

function team_hover() {
  var a = document.getElementById("gl1");
  var b = document.getElementById("gl2");
  var myVar = setInterval(opac, 20);
  var i = 0;

  function opac() {
    i = i + 0.1;
    a.style.opacity = 1 - i;
    if (i >= 1) {
      a.style.display = "none";
      b.style.display = "block";
    } else {}
  }
}

function team_hover_bbye() {
  var i = document.getElementById("gl1");
  var j = document.getElementById("gl2");
  i.style.opacity = 1;
  i.style.display = "block";
  j.style.display = "none";
}

team_hover_bbye();

＆＃13;

#gl1, #gl2 { display: inline-block; width: 2em; height: 2em; margin: 0.5em; }
#gl1 { background: #F00; }
#gl2 { background: #0F0; }

＆＃13;

<div id="gl1" onmouseover="team_hover()"></div>
<div id="gl2" onmouseover="team_hover()"></div>

＆＃13;

Answer 1

你的问题是持续滚动的间隔，你正在使用错误的事件。

试试这个：

＆＃13;

var myVar;

function team_hover() {
  var a = document.getElementById("gl1");
  var b = document.getElementById("gl2");
  clearInterval(myVar); // Needed here
  myVar = setInterval(opac, 20);
  var i = 0;

  function opac() {
    i = i + 0.1;
    a.style.opacity = 1 - i;
    if (i >= 1) {
      a.style.display = "none";
      b.style.display = "block";

      clearInterval(myVar); // Performance gain
    } else {}
  }
}

function team_hover_bbye() {
  clearInterval(myVar); // Real fix
  var i = document.getElementById("gl1");
  var j = document.getElementById("gl2");
  i.style.opacity = 1;
  i.style.display = "block";
  j.style.display = "none";
}

team_hover_bbye();

＆＃13;

#gl1, #gl2 { display: inline-block; width: 2em; height: 2em; margin: 0.5em; }
#gl1 { background: #F00; }
#gl2 { background: #0F0; }

＆＃13;

<div id="gl1" onmouseenter="team_hover()"></div>
<div id="gl2" onmouseout="team_hover_bbye()"></div>

＆＃13;

还值得注意的是，您尝试归档的内容可以通过CSS完成。

Javascript显示属性不起作用

1 个答案: