Stacking DIV Click Events for JavaScript

Issue

Currently programming a web application that is a rendition of the Board Game Splendor for educational purposes. Right now I'm getting into the part of my coding where we will be handling events.

I'm looking to be able to have the user hover over the cards in the middle and have it dim displaying the word BUY at the top half and RESERVE at the bottom half. Then while hovering over the whole card the user can click either BUY or RESERVE depending on what they want to do.

My assumption right now of how to handle this would be to have a mouseover event in JavaScript for the whole div that contains the card image, and then to have two divs on top of that div (One for the top half and one for the bottom half) that each have separate click events since each will function differently.

I guess I'm wondering, will that be a problem since technically the whole card div will be beneath those two divs? And should I be looking to solve this problem with a different approach in the code? (I can't use things like jQuery in my project either, just HTML CSS and JS)

Solution

I would solve the problem using css, specifically using the :hover modifier. The BUY and RESERVE buttons would have display:none, but once you hover over the parent element, in this case the card, you can change to display: block. You can use both the z-index and position css properties to position both buttons anywhere on the card. For example

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

With html

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

Answered By - sagelliv