Stacking DIV点击Javascript事件

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

我期望能够让用户将鼠标悬停在中间的卡片上，让它在上半部分显示“购买”字样，而在下半部分显示“预留”字样。然后在整个卡片上悬停时，用户可以根据他们想要做的事情点击购买或预订。

我现在假设如何处理这个问题，就是在Javascript中为包含卡片图像的整个div创建一个mouseover事件，然后在该div的顶部有两个div（一个用于上半部分和一个用于下半部分），每个单独的点击事件都会有不同的功能。

我想我想知道，这将是一个问题，因为技术上整个卡div将在这两个div下面？我应该在代码中寻找解决这个问题的另一种方法吗？（我不能在我的项目中使用像Jquery这样的东西，只是HTML CSS和JS）

2015-10-11 tokyo0709

我会用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>

来源

2015-10-11 23:56:20 sagelliv

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

至于点击事件，你是对的，卡本身将无法被点击。但是，您可以通过event.target.parentNode访问卡本身，以便找到您点击的卡以及点击时操作卡本身。

来源

2015-10-11 23:53:42

Stacking DIV点击Javascript事件

回答

相关问题