目前正在编写一个 Web 应用程序，该应用程序是用于教育目的的棋盘游戏 Splendor 的再现。现在我正在进入我的编码部分，我们将在其中处理事件。
我希望能够让用户将鼠标悬停在中间的卡片上，并使其变暗，在上半部分显示“购买”一词，在下半部分显示“保留”一词。然后，将鼠标悬停在整个卡片上时，用户可以根据他们想要执行的操作单击“购买”或“保留”。
我现在关于如何处理这个问题的假设是在 JavaScript 中为包含卡片图像的整个 div 提供一个鼠标悬停事件，然后在该 div 顶部放置两个 div(一个用于上半部分，一个用于上半部分)对于下半部分)，每个都有单独的点击事件，因为每个事件的功能都不同。
我想我想知道，这会是一个问题吗，因为从技术上讲，整个卡片 div 将位于这两个 div 之下？我应该在代码中使用不同的方法来解决这个问题吗？ (我的元素中也不能使用 jQuery 之类的东西，只能使用 HTML CSS 和 JS)
最佳答案
我会使用 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>
关于javascript - JavaScript 的堆叠 DIV 点击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33071317/