堆叠 DIV JavaScript 的点击事件

Question

目前正在编写一个 Web 应用程序，该应用程序是出于教育目的对 Board Game Splendor 的再现。现在我正在进入我的编码部分，我们将在其中处理事件。

我希望能够让用户将鼠标悬停在中间的卡片上，并让它变暗，在上半部分显示 BUY 字样，在下半部分显示 RESERVE 字样。然后，将鼠标悬停在整张卡片上时，用户可以根据自己的需要点击“购买”或“预订”。

我现在假设如何处理这个问题是在 JavaScript 中为包含卡片图像的整个 div 设置一个鼠标悬停事件，然后设置两个 div 最重要的是 div（一个用于上半部分，一个用于下半部分）每个都有单独的点击事件，因为每个事件的功能不同。

我想我在想，这会不会成为问题，因为从技术上讲，整张卡片 div 都将位于那两个 div 之下？我是否应该在代码中使用不同的方法来解决这个问题？（我也不能在我的项目中使用jQuery之类的东西，只是HTML CSS和JS）

Answer 1

您放置在每张卡片顶部的两个按钮可以在其背景颜色属性上具有 CSS 不透明元素，例如 rgba(0,0,0,0.5) 允许卡片的其余部分显示在两个按钮 div 下方并变得部分透明。

关于点击事件，你说的对，卡片本身是不会被点击的。但是，您可以通过 event.target.parentNode 访问卡片本身，以便找到您正在单击的卡片以及在单击时操作卡片本身。

Answer 2

我会使用 css 解决问题，特别是使用 :hover 修饰符。 BUY 和 RESERVE 按钮将具有 display:none，但是一旦您将鼠标悬停在父元素（在本例中为卡片）上，您就可以更改为 display: block。您可以使用 z-index 和 position css 属性将两个按钮放置在卡片上的任意位置。例如

.card:hover {
   position: relative;
   z-index: 1;
  .buy, .reserve { display: block; }
}
.buy, .reserve {
  position: absolute;
  z-index: 2;
  display: none;
}

和html

<div class='card'>
  <div class='buy'></div>
  <div class='reserve'></div>
</div>

堆叠 DIV JavaScript 的点击事件

Stacking DIV Click Events for JavaScript

javascript

css

dom-events