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修饰符。 “买入”和“预留”按钮将具有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事件

2 个答案: