CODEWITHSUNDEEP
htmlcsshover
Ondrej
Ondrej

Reputation: 1017

Using CSS, how to display another div on top of original on the hover

I have 4 divs in a some kind of boxes and I would like to hide original div (on hover) with another pair of hidden divs. So at the beginning it would looks like

 _______    _______
|  Q1   |  |  Q2   |
|_______|  |_______|
 _______    _______
|  Q3   |  |  Q4   |
|_______|  |_______|

and after hover on Q1 pair of hidden divs would appear and hide Q1, something like:

 ___  ___    _______
| Y || N |  |  Q2   |
|___||___|  |_______|
 _______    _______
|  Q3   |  |  Q4   |
|_______|  |_______|

Is it possible to get this behavior using CSS? My code so far looks like this (there is just changing colors on hovering, every time I add new div it messes up my table:

 .table {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  background-color: #eee;
  color: #232794;
}

.boxes {
  background-color: #232794;
  color: #fff;
  border-radius: 7px;
  padding: 33px;
  text-align: center;
  transition: 0.3s;
}

.boxes:hover {
  background-color: #000000;
}
<body>
<div class="table">
  <div class="boxes">Q1</div>
  <div class="boxes">Q2</div>
  <div class="boxes">Q3</div>
  <div class="boxes">Q4</div>
</div>

Upvotes: 0

Views: 61

Answers (1)

Bryce Howitson
Bryce Howitson

Reputation: 7690

Basically you need to add elements inside your boxes to hide/show. You can either do this with pseudo-elements or by adding something to the DOM. Since I assume you're going to be able to click the "yes/no" actions, you should actually add an element.

 .table {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  background-color: #eee;
  color: #232794;
}

.boxes {
  width: 100px;
  height: 100px;
  background-color: #232794;
  color: #fff;
  border-radius: 7px;
  text-align: center;
  transition: 0.3s;
}
.boxes .question, .boxes .answer {
  /* center horizontally & vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.boxes .answer {
  /* hide this until hover */
  display:none;
}

.boxes:hover {
  cursor:pointer;
}
.boxes:hover .question {
  /* hide question */
  display:none;
}
.boxes:hover .answer {
  /* show answer */
  display:block;
}
<body>
<div class="table">
  <div class="boxes">
    <div class="question">Q1</div>
    <div class="answer">
     <button>Yes</button>
     <button>No</button>
    </div>
  </div>
  <div class="boxes">
    <div class="question">Q2</div>
    <div class="answer">
     <button>Yes</button>
     <button>No</button>
    </div>
  </div>
  <div class="boxes">
    <div class="question">Q3</div>
    <div class="answer">
     <button>Yes</button>
     <button>No</button>
    </div>
  </div>
  <div class="boxes">
    <div class="question">Q4</div>
    <div class="answer">
     <button>Yes</button>
     <button>No</button>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions