Generate an overlay div that does not impact the content of the top div

My website has a specific requirement where I need an overlay div to cover the entire body when hovering over the menu.

<header><menu><ul><li class="new-menu">menu1</li></menu></header>

 <div id="myNav" class="overlay"></div>

 <section id="content"></section>

This is a snippet of my HTML code. The header section contains the menu and submenu, while the body section contains the rest of the content.

 .overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.58);

}

Currently, when hovering over the new-menu, the width of the overlay is set to 100% to create a black overlay across the entire website.

However, I only want the overlay to cover a specific section (#content). How can I achieve this while maintaining the sticky header functionality of my menu?

jqueryhtmlcss

Answer №1

To make your sticky header fixed, add this CSS:

Example:

<header>
  <menu>
    <ul>
      <li class="new-menu">menu1</li>
    </ul>
  </menu>
</header>

<div id="myNav" class="overlay"></div>

<section id="content"></section>

CSS:

header{
  z-index: 5;
  position: fixed;
  width: 100%;
  top: 0;
  background: white;
}
.overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.58);
}


header{
  z-index: 5;
  position: fixed;
  width: 100%;
  top: 0;
  background: white;
}
.overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.58);
}
<header><menu><ul><li class="new-menu">menu1</li></menu></header>

 <div id="myNav" class="overlay"></div>

 <section id="content"></section>

Answer №2

To create an overlay on a specific div, you can utilize the CSS pseudo-elements :after or :before.

#content {position: relative;}
 #content:after {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; content: '';}

Answer №3

One approach is to utilize

header:hover + #myNav {
 width: 100%;
}

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 is the best way to retrieve the value of a textbox in AngularJS?

Trying my hand at creating a basic web page using angular. I've got 2 textboxes and 2 buttons - one to set a predefined value in a textbox, and the other to add some text. Here's the code snippet: <!DOCTYPE html> <html lang="en" ng-app ...

javascriptjqueryhtmlangularjs

Unable to retrieve xmlhttp response from local server

When attempting to retrieve an xmlhttp request from my server, which is running on a local machine, function makeRequest(url) { var url = "http://localhost:8081/data/json"; request = new XMLHttpRequest(); request.onreadystatechange = alert ...

jsonjquery

How can I enhance Parallax scrolling performance on Chrome?

I recently completed a tutorial from the following link: After customizing it by changing the image to something different than clouds, I noticed that my version of the website was experiencing lag issues in Chrome but worked fine in Firefox. However, whe ...

jqueryhtmlcss

Ways to slightly tilt an image in Material-UI

I am having trouble displaying my cactus partially above my dialog without it getting cut off when I apply certain styles. Could someone please point out what I might be doing wrong? Here are the styles for the cactus: cactus: { position: 'absolut ...

cssreactjsmaterial-uidialog

Implement a "View All" link to toggle between displaying all items and keeping one item open by default,

I am working on multiple toggles for each letter of the alphabet. To make it easier for users, I want to add a "See All" button that will open any closed toggles. Additionally, I want the toggle for the letter A (div1) to be automatically open when the pag ...

jqueryhtml

Spin the content of a div after a button click with the power of jquery and css

Looking to add interactivity to rotate text within a div upon button click using jQuery and CSS. If the user selects Rotate Left, the text will rotate to the left. Alternatively, if the user chooses Rotate Right, the text will rotate to the right. Here&a ...

javascriptjqueryhtmlcss

Using Javascript to swap background images, ensuring that the initial image is shown only once

I have a query regarding the background image rotation on my HTML page. I am currently using the code below to change the background image, but I want the first image to be displayed only once while the rest continue rotating. Can anyone provide guidance o ...

javascriptjqueryhtml

Include previous input as a "phantom" thumbnail to the slider element of type "range"

https://i.stack.imgur.com/JnuCN.png Using a tutorial from w3schools, I have customized a regular range slider. The objective is to send a new value command to an external MQTT-based home automation system and display the previous value as a ghost-thumb in ...

javascripthtmlcssinputrange

What is the best way to include a text input as the last option in a Select input form field?

I would like to implement a select input feature where users can choose from predefined options, with the added functionality of including a text input field as the last option for users who prefer to enter their own category. How can I achieve this? Curr ...

javascripthtmlcssnode.jsexpress

Adjusting Header Size While Scrolling in Angular

Looking for assistance with AngularJS regarding handling events (specifically scrolling). I am trying to dynamically change the size of the header based on whether the user scrolls up or down. Below is a snippet of JavaScript code that achieves this effect ...

javascriptjqueryhtmlcssangularjs

What causes the sudden disappearance of the returned value from AJAX?

This piece of code is what runs on my server: modify_emp.php <?php echo $_POST[id]; ?> Below is the Javascript code in my HTML page: <script> $(document).ready(function () { var alreadyClicked = false; $('.element').h ...

javascriptphpjqueryhtmlajax

Holding off on executing the event handler until the completion of another function

On our website, we've integrated a 3rd party solution that cannot be directly updated. However, I can insert my own JavaScript code to manipulate the solution. This third-party tool includes a button that triggers an AJAX request. Before this request ...

javascriptjqueryajax

I am attempting to achieve a smooth transition effect by fading in and out the CSS background color using JQuery and AJAX

Can anyone help me with my issue related to using Ajax to fadeIn a background color in beforeSend and fadeOut in success? I seem to have made some mistakes but can't figure out what went wrong. var data={ ...

javascriptjquerycssajax

Filtering rows of an HTML table that contain links in the `<href>` column data in real time

When using HTML and JavaScript, I have found a solution that works well for many of the columns I am working with. You can see the details on how to dynamically filter rows of an HTML table using JavaScript here. var filters=['hide_broj_pu',&apo ...

javascripthtmlcss

Adding a PHP script alters the way content is displayed in a web browser

Forgive me for what may seem like a trivial question, but I have been searching for hours without any luck. It appears that including more than one file in an already included file is causing a minor change to the page layout. The issue manifests as a sli ...

phphtmlrender

establishing the dimensions of table data cells

I'm facing a challenge with setting the width and height for table data that changes dynamically based on different values. The dimensions of the table itself are not definite, so I need to find a solution. Here's the code snippet I'm curren ...

javascriptcsshtml

What is the maximum file size that the data link is able to store?

For instance, a file like an image, video, or sound can be saved in the data link Take an image for example, it may be stored with the initial link: data:image/jpeg;base64,/..... followed by various characters. But, is there a specified size limit at whic ...

javascripthtmlimageimage-processing

Tips for positioning an advertisement at the center of a full-screen HTML5 game

I am struggling to find a way to perfectly center my advertisement in a fullscreen HTML5 game. The game automatically expands to fullscreen when played, and I want the advertisement to always be positioned in the center, regardless of whether the game is b ...

javascriptcsshtml

Find out if the On/Off switch is in the "on" or "off

My HTML switch code is shown below: $('#myonoffswitch').click(function () { alert($('#myonoffswitch').val()); }); .onoffswitch { position: relative; width: 77px; -webkit-user-select ...

htmljquery

Utilizing flex-box for smooth transitions in React Router with react-tranisition-group

Currently, I am working on implementing transitions for my react-router page using react-transition-group. All of my page content is wrapped inside a container, and I have applied flex-box to center the container. Unfortunately, I am facing issues with g ...

cssreactjsreact-transition-group