How to make a box appear when hovering over content in flexbox?

Question

I've been trying to make a flex box, and then when the content inside the flexbox is hovered over, another box will appear (underneath it, not next to the side). For some reason, when using "flex-container", this works. But I don't want this to happen when people hover over spaces in between. When trying to do this, and calling the class specifically, which is "flex-container-content" it refuses to work. For some reason, it just does not do anything. I even tried assigning it an id, but it didn't work. I don't know what else I should try because to me it seems like it should be working. Any thoughts?

.flex-container {
    display: flex;
    background-color: white;
    margin-left: 5%;
}

.flex-container-content {
    background: black;
    color: white;
    margin: 1%;
    font-family: 'Lucida Sans Regular';
    font-size: x-large;
    padding: 1% 2% 1% 2%;
    border-radius: 5px;
}
.flex-container-content:hover{
    display: block;
    background: rgb(34, 34, 34);
    cursor: pointer;
    color: rgb(175, 175, 175)
}

#job-descriptor-1 {
    display: none;
    color: rgb(218, 218, 218);
    background: rgb(121, 121, 121);
    font-family: 'Lucida Sans Regular';
    font-size: large;
    padding: 2%;
    box-shadow: 0px 0px 3px 0px;
    text-align: center;
}

#flex-1:hover + #job-descriptor-1{
    display: block;
}

<div class="flex-container">
    <div id="flex-1" class="flex-container-content">Police</div>
    <div class="flex-container-content">Fast Food</div>
    <div class="flex-container-content">Trucker</div>
    <div class="flex-container-content">Drug Dealer</div>
    <div class="flex-container-content">Post Office Curier</div>
    <div class="flex-container-content">Fisherman</div>
</div>

<div id="job-descriptor-1">
    Hello there, top of the morning to you.
</div> 

Answer 1

As @TJ mentioned this is only possible with pure css if the hidden element (#job-descriptor-1) is inside the hovered element.

.flex-container {
    display: flex;
    background-color: white;
    margin-left: 5%;
    position: relative;
}

.flex-container-content {
    background: black;
    color: white;
    margin: 1%;
    font-family: 'Lucida Sans Regular';
    font-size: x-large;
    padding: 1% 2% 1% 2%;
    border-radius: 5px;
}
.flex-container-content:hover{
    display: block;
    background: rgb(34, 34, 34);
    cursor: pointer;
    color: rgb(175, 175, 175)
}

#job-descriptor-1 {
    display: none;
    position: absolute;
    top: 100%;
    left: -5%;
    width: 100vw;
    color: rgb(218, 218, 218);
    background: rgb(121, 121, 121);
    font-family: 'Lucida Sans Regular';
    font-size: large;
    padding: 2%;
    box-shadow: 0px 0px 3px 0px;
    text-align: center;
}

#flex-1:hover #job-descriptor-1{
    display: block;
}

<div class="flex-container">
    <div id="flex-1" class="flex-container-content">
        Police
        <div id="job-descriptor-1">
            Hello there, top of the morning to you.
        </div> 
    </div>
    <div class="flex-container-content">Fast Food</div>
    <div class="flex-container-content">Trucker</div>
    <div class="flex-container-content">Drug Dealer</div>
    <div class="flex-container-content">Post Office Curier</div>
    <div class="flex-container-content">Fisherman</div>
</div>

---

But if you want the hover effect for all hover-targets (.flex-container-content) you have to use javascript. You attach in a for loop event listeners for mouseover and mouseout to each hover-target. The called handler (an anonymous function) changes the display property of the hidden element.

Working example:

const hover_targets = document.querySelectorAll('.flex-container-content');

for(i = 0; i < hover_targets.length; i++) {
    hover_targets[i].addEventListener('mouseover', function() {
        document.querySelector('#job-descriptor-1').style.display = 'block';
    });
    hover_targets[i].addEventListener('mouseout', function() {
        document.querySelector('#job-descriptor-1').style.display = 'none';
    });
}

.flex-container {
    display: flex;
    background-color: white;
    margin-left: 5%;
}

.flex-container-content {
    background: black;
    color: white;
    margin: 1%;
    font-family: 'Lucida Sans Regular';
    font-size: x-large;
    padding: 1% 2% 1% 2%;
    border-radius: 5px;
}
.flex-container-content:hover{
    display: block;
    background: rgb(34, 34, 34);
    cursor: pointer;
    color: rgb(175, 175, 175)
}

#job-descriptor-1 {
    display: none;
    color: rgb(218, 218, 218);
    background: rgb(121, 121, 121);
    font-family: 'Lucida Sans Regular';
    font-size: large;
    padding: 2%;
    box-shadow: 0px 0px 3px 0px;
    text-align: center;
}

<div class="flex-container">
    <div id="flex-1" class="flex-container-content">Police</div>
    <div class="flex-container-content">Fast Food</div>
    <div class="flex-container-content">Trucker</div>
    <div class="flex-container-content">Drug Dealer</div>
    <div class="flex-container-content">Post Office Curier</div>
    <div class="flex-container-content">Fisherman</div>
</div>

<div id="job-descriptor-1">
    Hello there, top of the morning to you.
</div> 

---

If you are using jQuery for your page the code gets far simpler.

Working example:

$('.flex-container-content').on('mouseover', function() {
    $('#job-descriptor-1').show();
});
$('.flex-container-content').on('mouseout', function() {
    $('#job-descriptor-1').hide();
});

.flex-container {
    display: flex;
    background-color: white;
    margin-left: 5%;
}

.flex-container-content {
    background: black;
    color: white;
    margin: 1%;
    font-family: 'Lucida Sans Regular';
    font-size: x-large;
    padding: 1% 2% 1% 2%;
    border-radius: 5px;
}
.flex-container-content:hover{
    display: block;
    background: rgb(34, 34, 34);
    cursor: pointer;
    color: rgb(175, 175, 175)
}

#job-descriptor-1 {
    display: none;
    color: rgb(218, 218, 218);
    background: rgb(121, 121, 121);
    font-family: 'Lucida Sans Regular';
    font-size: large;
    padding: 2%;
    box-shadow: 0px 0px 3px 0px;
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="flex-container">
    <div id="flex-1" class="flex-container-content">Police</div>
    <div class="flex-container-content">Fast Food</div>
    <div class="flex-container-content">Trucker</div>
    <div class="flex-container-content">Drug Dealer</div>
    <div class="flex-container-content">Post Office Curier</div>
    <div class="flex-container-content">Fisherman</div>
</div>

<div id="job-descriptor-1">
    Hello there, top of the morning to you.
</div>

Answer 2

You are using adjacent sibling selector (+), which means the element you're targeting needs to be the next element of it's parent - but #job-descriptor-1 is outside the parent (flex-container). Currently there is no way in CSS to traverse up. The only way to do this without JavaScript would be to move #job-descriptor-1 somewhere inside flex-container.

You can then use positioning techniques like position: absolute in order to avoid #job-descriptor-1 affecting the flex layout.

---

.flex-container {
  display: flex;
  background-color: white;
  margin-left: 5%;
}

.flex-container-content {
  position: relative;
  background: black;
  color: white;
  margin: 1%;
  font-family: 'Lucida Sans Regular';
  font-size: x-large;
  padding: 1% 2% 1% 2%;
  border-radius: 5px;
}

.flex-container-content:hover {
  background: rgb(34, 34, 34);
  cursor: pointer;
  color: rgb(175, 175, 175)
}

#job-descriptor-1 {
  display: none;
  position: absolute;
  top: 100%;
  color: rgb(218, 218, 218);
  background: rgb(121, 121, 121);
  font-family: 'Lucida Sans Regular';
  font-size: large;
  padding: 2%;
  box-shadow: 0px 0px 3px 0px;
  text-align: center;
}

#flex-1:hover #job-descriptor-1 {
  display: block;
}

<div class="flex-container">
  <div id="flex-1" class="flex-container-content">Police
    <div id="job-descriptor-1">
      Hello there, top of the morning to you.
    </div>
  </div>
  <div class="flex-container-content">Fast Food</div>
  <div class="flex-container-content">Trucker</div>
  <div class="flex-container-content">Drug Dealer</div>
  <div class="flex-container-content">Post Office Curier</div>
  <div class="flex-container-content">Fisherman</div>
</div>