Having an issue with a 5 column flexbox. Each box should display a header text and supplementary text only when hovered over, returning to normal when unhovered. I was able to accomplish this in Codepen (view the rough model here). However, when trying to implement it in Elementor, the supplementary text appears in all columns on hover over just one. You can see the issue on the page here. I've sought help from this community before, though it was flagged as a copy question. I have spent hours researching to ensure that's not the case this time. If it is, I apologize in advance. Here's the code for reference:
/* reset browser defaults */
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
.container {
display: flex;
height: 100vh; /* mandatory (100% of the viewport height) */
background: #000;
opacity: 0.6;
}
.container div{
flex: 1;
text-align: center;
transition: .3s;
max-width: 20%;
padding: 8em 0;
background: #000;
opacity: 0.99;
}
.container div:hover {
transition: .5s;
max-width: 40%;
flex-grow: 2;
height: 100vh;
cursor: pointer;
background:#000;
opacity: 0.7;
}
div:hover p > span p {
color: #bf9456;
}
div :hover a > span {
color: #bf9456;
}
Here is the HTML structure:
<div class="container">
<div>
<p style="color: white;">ABOUT US</p>
<p><br />
<a style="color: black;"><br />
<span class="colo">OUR IDEA</span></a></p>
</div>
<div>
<p style="color: white;">2</p>
<br />
</div>
<div><span style="color: #ff9900;">3</span></div>
<div><span style="color: #ff9900;">4</span></div>
<div><span style="color: #ff9900;">5</span></div>
</div>