Question

我正在创建一个HTML页面，现在我用HTML和CSS制作了内容，我想用Javascript和jQuery添加行为。我的页面顶部有一个用CSS制作的乐队（标识为#band）。我希望它：

在其上放置按钮，让用户更改背景颜色（完成）
显示onload（已完成）
加载后，fadeOut(500)（已完成）
onhover，show
当没有时，徘徊隐藏

但是，.hover(function(){})中的脚本未运行。为什么是这样？为了让您重现我的问题，下面是代码：

我做了一些测试并且：

语法正确
jQuery有效（特别是fadeIn()）

我认为问题在于<div id="band">在淡出时会卸载，这意味着无法检测到任何内容。我该如何克服这个问题？

function A() {
    document.body.style.backgroundColor = "#FF1493";
}

function B() {
    document.body.style.backgroundColor = "#22F822";
}

function C() {
    document.body.style.backgroundColor = "#888888";
}

function D() {
    document.body.style.backgroundColor = "#2262FF";
}

$(document).ready(function() {
  $("#band").fadeOut(750);
  $("#band").hover($("#band").fadeIn(750),$("#band").fadeOut(750));
});

/*Basic Format*/

#band {
  border: 1px solid black;
  background: #959595;
  width: 100%;
  top: 0;
}

#colors {
  left: 0;
  width: 15%;
  background-color: grey;
}

.buttoncolor {
  cursor: pointer;
  border: 1px solid white;
  margin: 10px;
  width: 20px;
  height: 20px;
}

#buttonA {
  background-color: #FF1493;
}

#buttonB {
  background-color: #22F822;
}

#buttonC {
  background-color: #888888;
}

#buttonD {
  background-color: #2262FF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onload="A()">

  <div class="fade" id="band">
    <div id="colors">
      <button type="button" class="buttoncolor" id="buttonA" onclick="A()"></button>
      <button type="button" class="buttoncolor" id="buttonB" onclick="B()"></button>
      <button type="button" class="buttoncolor" id="buttonC" onclick="C()"></button>
      <button type="button" class="buttoncolor" id="buttonD" onclick="D()"></button>
    </div>
   </div>
   <div><h1>TITLE</h1></div>
</body>

隐藏元素时如何使用`.hover（）`？

0 个答案: