Use Flexbox hover effect to display submenu text exclusively in the column being hovered

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>

Answer №1

It's important to simplify your code by reducing nesting and ensuring consistent markup throughout.

You can achieve a fade-in effect on supplementary text when hovering over the parent div using the nth-child selector.

.container > div:nth-child(1):hover p > span {
  color: #bf9456;
}

.container > div:nth-child(2):hover p > span {
  color: #bf9456;
}

.container > div:nth-child(3):hover p > span {
  color: #bf9456;
}

.container {
  display: flex;
  height: 100vh;
  background: #000;
  opacity: 0.6;
}

.container div {
  color: #fff;
  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;
  cursor: pointer;
  background: #000;
  opacity: 0.2;
  color: #fff;
}

.a {
  flex: 1;
  color: #000;
}

.container > div:nth-child(1):hover p > span {
  color: #bf9456;
}

.container > div:nth-child(2):hover p > span {
  color: #bf9456;
}

.container > div:nth-child(3):hover p > span {
  color: #bf9456;
}
<div class="container">

  <div>
    Make me over!
    <p style="color:black">
      <span class="colo">View Portfolio</span>
    </p>
  </div>

  <div>
    View Portfolio
    <p style="color:black">
      <span class="colo">Why would you say that?</span>
    </p>
  </div>
 
  <div>
    Help me!
    <p style="color:black">
      <span class="colo">Again..? Why would you say that?</span>
    </p>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the pros and cons of embedding background image data into CSS as Base64?

While examining the source code of a greasemonkey userscript, I came across some interesting CSS: .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsK ...

Exploring the process of retrieving outcomes from Node.js within a Knockout ObservableArray

Below is the Node.js code snippet I have: var http = require('http'); var port = process.env.port || 1337; var MovieDB = require('moviedb')('API KEY'); MovieDB.searchMovie({ query: 'Alien' }, function (err, res) { ...

Ways to customize the datetime-local format in an HTML input field

When dealing with the HTML input of datetime type, consider the following: Datefield: <input type="datetime-local" data-date="" data-date-format="DD MMMM YYYY, h:mm:ss"> The script below includes important code. $("input").val(moment().format(&apo ...

The functionality of the margin gets disrupted when the float property is not included

Could someone please explain why the margin stops working when I remove the float property? Is there a connection that I am missing? .header-image { float: left; width: 33%; margin-top: 1em; padding-right: 3em; text-align: right; } ...

Styles created using makeStyles in MUI are no longer working properly following an update to both MUI and React versions

Implementing the MUI Dropdown in a components library. When testing the library in Storybook, everything functions properly. However, when integrating the component into a separate React project, the layout becomes distorted. The Dropdown label is posit ...

Python code displays output directly on an HTML webpage

I have created a basic Python chatbot that performs calculations and responds to user input. The chatbot continuously runs in Python, checking previous responses for context. I want to make this chatbot available online and achieve the following: Send us ...

What are some ways to utilize a Bootstrap modal button embedded within a clickable row?

Having a strange issue in my project. I am trying to incorporate a modal button inside a link-able row. However, when I click the button to trigger the modal id, it pops up and then redirects to the myexample.com page, which is expected behavior. While I ...

Is it possible to extract around 10 variables from a JavaScript code, then display them on a webpage after execution?

I have just completed writing a Javascript code with around 3,000 lines. This code contains over 60 variables, but there are a few specific variables that I would like to display on my main HTML page. These variables include: totalTime longitudinalAcceler ...

Modify the HTML input type color in React.js only after releasing the mouse button

<input className="color-palatte" type="color" onChange={(e) => onColorChange(e)} /> When interacting with the color palette, I have set up an API call to trigger only when I release the slider instead of continuous calls while sliding over the co ...

Issue with element alignment using CSS increments

I'm confident that this code should be functioning properly, but for some reason it's not. I feel like there must be a small detail that I'm overlooking: Markup: <section id="content"></section> Styling: #content { positi ...

Positioning the <div> to the left of a sidebar

I regret to inform you that I am unable to provide an answer at this time. Below is the code snippet provided: #wrapper { width: 844px; display: block; margin-left: auto; margin-right: auto; text-align: left; } #posts { width: 844px; float: left; } .en ...

I'm having trouble with my tablet view taking priority over my desktop view - what could be causing this issue?

Styling for different screen sizes: @media (min-width: 991px) and (max-width:768px){} .container, .container1, .container2 .container3{ float: left; } .container1{ width: 50%; } .container2{ width: 50%; } .container3{ width: 100%; } /**** ...

altering the number of columns in Bootstrap based on screen size to prevent stacking

Is there a way to use the 'col' classes without having them stack on top of each other? I have a form row that requires different numbers of columns on various screen sizes. <div class="form-row"> <div class="col-3"></div> ...

What is causing the section to cover the navbar?

My content is overlapping the navbar on certain screen sizes, and I'm not sure why. Any ideas on how to fix this issue? Would wrapping everything in a container help? Currently using bootstrap v5.3.0-alpha1. Additionally, when I have a collapsed nav ...

Enhance the appearance of specific wordpress usernames by adding a touch of "flair" next to them

I'm looking to add a special "flair" next to specific users on my WordPress website, similar to how YouTube distinguishes verified users. I have the CSS for changing the color on hover, but I need help keeping it positioned correctly. Examples from Y ...

Vue - making one element's width match another element's width

Trying to dynamically adjust the innermost element's width to match the outermost element's width with Vue: <div id="banner-container" class="row"> <div class="col-xs-12"> <div class="card mb-2"> <div ...

Prevent Cross-Site Scripting attacks in Laravel by sanitizing user input, even when allowing HTML tags

What measures can be taken to protect against XSS attacks when a user is allowed to use HTML tags, such as in a textarea element? Avoiding the stripping or escaping of all tags complicates the situation and rules out the option of using {{ }}. It's a ...

There seems to be a clash between Modal Semantic UI React and Bootstrap causing issues

I created a project using .net core MVC. I have integrated the semantic-ui-react modal by importing its library and linking the CSS for it to function properly. However, I encountered an issue where the bootstrap CSS was conflicting with the CDN for semant ...

What could be causing the video to extend beyond the limits of the container?

When extending the result window, the video ends up overlapping the section below it. I am looking to keep the video within the confines of the section's height, which is set to height:100vh. Is there a way to accomplish this? Check out this jsFiddl ...

Utilizing Google Maps API version 3 to display various groups of markers

I am encountering an issue while trying to plot fixed markers and a user position marker on a Google Map. I want to use different images for these markers, but something strange is happening. When the page loads, all fixed markers show up correctly initial ...