Display overlay on hover using only css without javascript

Question

I am trying to make a full page overlay when I hover on my navbar menu ul

the overlay div is on the top of the page

When I hover on the ul the li links appear but the overlay doesn't. How can I make appear the overlay using CSS only can anybody help?

This is the HTML and CSS code the full code of the header whith the span icons, ul and li. My intention is that when I hover on the ul the li links appear like in the code below and the overlay appear now only the li links appear

.header .container .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .container .row img {
    max-width: 207px;
    max-height: 207px;
}

.header .container .row .links {
    position: relative;
    z-index: 1;
}

.header .container .row .links .icon {
    width: 1.875em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    cursor: pointer;
}

.header .container .row .links .icon span {
    background-color: var(--whiteColor);
    margin-bottom: 0.3125em;
    height: 0.125em;
    background-color: #000;
}

.header .container .row .links .icon span:first-child {
    width: 100%;

}

.header .container .row .links .icon span:nth-child(2) {

    width: 100%;
}

.header .container .row .links .icon span:last-child {
    width: 60%;
    transition: 0.3s
}

.header .container .row .links:hover .icon span:last-child {
    width: 100%;
}

.header .container .row .links ul {
    display: none;
    background-color: #000;
    position: absolute;
    min-width: 12.5em;
    right: 0;
    top: calc(100% + 15px);
    z-index: 1;
}

.header .container .row .links ul::before {
    content: " ";
    position: absolute;
    border-width: 0.625em;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
    right: 0.3125em;
    top: -1.25em;
}

.header .container .row ul li {
    padding: 1em;
}

.header .container .row ul li a {
    text-transform: capitalize;
    color: var(--whiteColor);
    transition: color .3s ease-in-out;
}

.header .container .row ul li a:hover {
    color: var(--grayColor);
}

.header .container .row .links:hover ul,
.header .container .row .links:hover .overlay{
    display: block;
}

.overlay {
    display: none;
    position: fixed;
    background-color: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    z-index: 10;
}

.container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0.8em;
    padding-left: 0.8em;
}

  <div class="overlay"></div>
    <header class="header">
        <div class="container">
            <div class="row">
                <img src="https://images01.nicepage.com/51/41/51417a6d3ee82530e9117219a42fd762.png">
                <div class="links">
                    <span class="icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <ul>
                        <li><a href="#">home</a></li>
                        <li><a href="#">menu</a></li>
                        <li><a href="#">catering</a></li>
                        <li><a href="#">our menu</a></li>
                        <li><a href="#">our team</a></li>
                        <li><a href="#">contact us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

You cannot select ( with just CSS ) an element when hovering another element when these 2 elements don't have any relationship between them and when the second element is not after the first element . You should take a look at javascript. — Mihai T
– Mihai T, Commented Aug 28, 2021 at 12:39
Interesting how the question specifically asking for a "no javascript" solution, yet answer with javascript was accepted. — vanowm
– vanowm, Commented Aug 28, 2021 at 23:53
@vanowm because the answers were that it can't be done using only css — Mohamad
– Mohamad, Commented Aug 30, 2021 at 4:25
You can't with your current html setup, but with a little modification of html it can be done. There are plenty of examples with pure CSS popups out there. — vanowm
– vanowm, Commented Aug 30, 2021 at 11:04

score 1 · Accepted Answer · 2021-08-28 19:34:40Z

You can use a little bit Javascript and boom it's makes your navbar so attractive.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: 'Lato', sans-serif;
}

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

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
</style>
</head>
<body>

<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</div>


<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

<script>
function openNav() {
  document.getElementById("myNav").style.display = "block";
}

function closeNav() {
  document.getElementById("myNav").style.display = "none";
}
</script>
     
</body>
</html>

Explation of JS used:

onclick() is used here to call the function openNav by default set it's display:none; and then make display:block when someone calling openNav() fucntion.

Let me know if this will help you..

Muhammad Bilal · Accepted Answer · 2021-08-28 12:29:00Z

0

AFAIK you cannot change parent element on child hover using pure CSS you have to use use javascript to achieve it...

answered Aug 28, 2021 at 12:29

Muhammad Bilal

5271 gold badge5 silver badges13 bronze badges

Comments

Lajos Arpad · Accepted Answer · 2021-08-28 13:18:37Z

You need Javascript for this purpose, unfortunately, as far as I know. I have created an inner overlay div and two JS events to cope with the situation.

document.querySelector(".links").addEventListener("mouseenter", function() {
    let overlay = document.querySelector(".overlay");
    overlay.style.display = "block";
    let overlayContent = overlay.querySelector(".overlay-content");
    overlayContent.style.width = document.body.clientWidth + "px";
    overlayContent.style.height = document.body.clientHeight + "px";
});

document.querySelector(".links").addEventListener("mouseleave", function() {
    let overlay = document.querySelector(".overlay");
    overlay.style.display = "none";
});

.header .container .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .container .row img {
    max-width: 207px;
    max-height: 207px;
}

.header .container .row .links {
    position: relative;
    z-index: 1;
}

.header .container .row .links .icon {
    width: 1.875em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    cursor: pointer;
}

.header .container .row .links .icon span {
    background-color: var(--whiteColor);
    margin-bottom: 0.3125em;
    height: 0.125em;
    background-color: #000;
}

.header .container .row .links .icon span:first-child {
    width: 100%;

}

.header .container .row .links .icon span:nth-child(2) {

    width: 100%;
}

.header .container .row .links .icon span:last-child {
    width: 60%;
    transition: 0.3s
}

.header .container .row .links:hover .icon span:last-child {
    width: 100%;
}

.header .container .row .links ul {
    display: none;
    background-color: #000;
    position: absolute;
    min-width: 12.5em;
    right: 0;
    top: calc(100% + 15px);
    z-index: 1;
}

.header .container .row .links ul::before {
    content: " ";
    position: absolute;
    border-width: 0.625em;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
    right: 0.3125em;
    top: -1.25em;
}

.header .container .row ul li {
    padding: 1em;
}

.header .container .row ul li a {
    text-transform: capitalize;
    color: var(--whiteColor);
    transition: color .3s ease-in-out;
}

.header .container .row ul li a:hover {
    color: var(--grayColor);
}

.header .container .row .links:hover ul,
.header .container .row .links:hover .overlay{
    display: block;
}

.overlay {
    display: none;
    position: relative;
    z-index: -1;
}

.overlay-content {
    background-color: rgba(0,0,0,0.7);
    position: absolute;
}

.container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0.8em;
    padding-left: 0.8em;
}

    <div class="overlay"><div class="overlay-content"></div></div>
    <header class="header">
        <div class="container">
            <div class="row">
                <img src="https://images01.nicepage.com/51/41/51417a6d3ee82530e9117219a42fd762.png">
                <div class="links">
                    <span class="icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <ul>
                        <li><a href="#">home</a></li>
                        <li><a href="#">menu</a></li>
                        <li><a href="#">catering</a></li>
                        <li><a href="#">our menu</a></li>
                        <li><a href="#">our team</a></li>
                        <li><a href="#">contact us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

score 0 · Accepted Answer · 2021-08-28 13:29:03Z

You're gonna have to use at least a little bit of javascript for this mate. Do something like this:

    let icon = document.getElementsByClassName('icon')[0];
    let offCanvas = document.getElementsByClassName('offCanvas')[0];
    let overlay = document.getElementsByClassName('overlay')[0];

    icon.onmouseenter= () => {
        overlay.style.display = "block";
        overlay.style.opacity = "0";
        overlay.style.animation = "overlay .5s forwards";
    }

    icon.onmouseleave = () => {
        overlay.style.animation = "overlayHide .5s forwards";
    }

.header .container .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .container .row img {
    max-width: 207px;
    max-height: 207px;
}

.header .container .row .links {
    position: relative;
    z-index: 1;
}

.header .container .row .links .icon {
    width: 1.875em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    cursor: pointer;
}

.header .container .row .links .icon span {
    background-color: var(--whiteColor);
    margin-bottom: 0.3125em;
    height: 0.125em;
    background-color: #000;
}

.header .container .row .links .icon span:first-child {
    width: 100%;

}

.header .container .row .links .icon span:nth-child(2) {

    width: 100%;
}

.header .container .row .links .icon span:last-child {
    width: 60%;
    transition: 0.3s
}

.header .container .row .links:hover .icon span:last-child {
    width: 100%;
}

.header .container .row .links ul {
    display: none;
    background-color: #000;
    position: absolute;
    min-width: 12.5em;
    right: 0;
    top: calc(100% + 15px);
    z-index: 1;
}

.header .container .row .links ul::before {
    content: " ";
    position: absolute;
    border-width: 0.625em;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
    right: 0.3125em;
    top: -1.25em;
}

.header .container .row ul li {
    padding: 1em;
}

.header .container .row ul li a {
    text-transform: capitalize;
    color: var(--whiteColor);
    transition: color .3s ease-in-out;
}

.header .container .row ul li a:hover {
    color: var(--grayColor);
}

.header .container .row .links:hover ul,
.header .container .row .links:hover .overlay{
    display: block;
}

.overlay {
    display: none;
    position: fixed;
    background-color: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    z-index: 10;
}

.container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0.8em;
    padding-left: 0.8em;
}

.icon {
    height: 25px;
    width: 25px;
    background-color: black;
}

@keyframes overlay {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes overlayHide {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

  <div class="overlay"></div>
    <header class="header">
        <div class="container">
            <div class="row">
                <img src="https://images01.nicepage.com/51/41/51417a6d3ee82530e9117219a42fd762.png">
                <div class="links">
                    <span class="icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <div class="offCanvas">
                    <ul>
                        <li><a href="#">home</a></li>
                        <li><a href="#">menu</a></li>
                        <li><a href="#">catering</a></li>
                        <li><a href="#">our menu</a></li>
                        <li><a href="#">our team</a></li>
                        <li><a href="#">contact us</a></li>
                    </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>

Collectives™ on Stack Overflow

Display overlay on hover using only css without javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related