1

I'm trying to display some text underneath flexboxes I have created so when a user hovers over a box specific text is displayed.

CODE:

.Reports-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-bottom: 6.5px;
}

.Reportsbox {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Reports-container>div:hover {
  background-color: #777777 !important;
}

.Reports-container>div {
  height: 90px;
  width: 200px;
  float: left;
  text-align: center;
  background-color: #fff;
  border-radius: 5px;
  margin: 0 10px 0 10px;
  position: relative;
  font: 20px "Open Sans", sans-serif;
  font-weight: bold;
  color: #fff;
  margin: 6.75px 6.5px 0 6.75px;
}

.Reports-container a {
  color: #fff;
  text-decoration: none;
  line- height: 90px;
}

.Reports-container a:hover {
  color: #fff;
  text-decoration: none;
  line- height: 90px;
}

#Reportsbox1 {
  color: #fff;
  text-decoration: none;
}

#Reportsbox2 {
  color: #fff;
  text-decoration: none;
}

#Report-Detail-1 {
  display: none;
}

#Reportsbox1:hover #Report-Detail-1 {
  display: inline;
}
<div class="Reports-container">
  <div id="Reportsbox1" class="Reportsbox" style="background-color: #00b5cc;">
    <a href="www.google.com" target="_blank" rel="noopener noreferrer">Google</a>
  </div>

  <div id="Reportsbox2" class="Reportsbox" style="background-color: #ec008c;">
    <a href="www.bing.com" target="_blank" rel="noopener noreferrer">Bing</a>
  </div>
</div>

<div id="Report-Detail-1" class="ReportDetail">
  <p>Test message to be displayed on Report box 1hover</p>
</div>

I can get the text to hide but cannot get it to show when hovering on the box.

Calvin Nunes
  • 6,376
  • 4
  • 20
  • 48
code-404
  • 27
  • 6
  • 2
    current html structure won't allow you to do that with css only, if you want to keep the html structure use JS to show the text – aMJay Aug 16 '19 at 12:35
  • I thinks the problem is in the last rule of your css ```#Reportsbox1:hover #Report-Detail-1``` : the space means you want ```#Report-Detail-1'``` inside of ```#Reportsbox1:hover``` So, You need to move ```#Report-Detail-1``` inside of ```#Reportsbox1```. [MDN CSS descandant operator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator) – Florian Callewaert Aug 16 '19 at 12:36
  • Thanks everyone for your help and pointers. I was maybe being too ambitious with CSS and will look into the JS options without the need of additional wordpress plugins. – code-404 Aug 16 '19 at 12:53

0 Answers0