help是问号图像

Question

我正在使用HTML，CSS和jQuery创建一个互动游戏。在右下角有一个问号（图像文件，而不是文本）。我想要做的是当点击并按住问号时，一个框显示帮助。当鼠标被释放时，盒子消失了。 3个不同的页面有三个不同的帮助框。

help是问号图像

.help-box指的是来自不同页面的所有框 .growing-plants＆amp; .label-flower＆amp; .types-animal是不同的帮助盒。这是我的代码：

script.js文件：

$('#help').mousedown(function() {
  if (currentSection == 1) {
    $('.growing-plants').removeClass("hidden");
  } else if (currentSection == 2) {
    $('.label-flower').removeClass("hidden");
  } else if (currentSection == 3) {
    $('.types-animal').removeClass("hidden");
  }
});

$('#help').mouseup(function() {
  if (currentSection == 1) {
      $('.growing-plants').addClass("hidden");
  } else if (currentSection == 2) {
      $('.label-flower').addClass("hidden");
  } else if (currentSection == 3) {
      $('.types-animal').addClass("hidden");
  }

}）;

style.css文件：

#help {
     position: absolute;
     left:900px;
}

.help-box {
     position: absolute;
     top: 200px;
     left: 220px;
     z-index: 15;
}

.growing-plants {
     overflow: hidden;
}

.label-flower {
     overflow: hidden;
}

.types-animal {
     overflow: hidden;
}

html文件：

<img src="images/help-growing-plants.png" class="help-box growing-plants" alt="help" width="600" height="400">
<img src="images/help-label-flower.png" class="help-box label-flower" alt="help" width="600" height="400">
<img src="images/help-types-animal.png" class="help-box label-flower" alt="help" width="600" height="400">

任何帮助或建议都会非常感激!!!!

Answer 1

您需要先使用display: none;

设置样式来隐藏元素

.help-box {
     position: absolute;
     top: 200px;
     left: 220px;
     z-index: 15;
     display: none;
}

然后你可以使用jQuery .show()和.hide()

$('#help').mousedown(function() {
  if (currentSection == 1) {
    $('.growing-plants').show();
  } else if (currentSection == 2) {
    $('.label-flower').show();
  } else if (currentSection == 3) {
    $('.types-animal').show();
  }
});

$('#help').mouseup(function() {
  if (currentSection == 1) {
      $('.growing-plants').hide();
  } else if (currentSection == 2) {
      $('.label-flower').hide();
  } else if (currentSection == 3) {
      $('.types-animal').hide();
  }

Answer 2

除非你的＆＃34;隐藏＆＃34; class是在你没有链接问题的代码的一部分中定义的，使用.addClass(classNameYouWantToAdd)或.removeClass(classNameYouWantToAdd)正在寻找＆＃34;隐藏＆＃34;你还没有定义的课程。

如果您定义了一个类，然后将其应用于包含您要隐藏的内容的div，则其余代码应该可以正常工作

.hidden {
    visibility:hidden;
}

使用removeClass（“hidden”）来显示/隐藏div

help是问号图像

2 个答案: