How to dim the body from navbar hover HTML CSS?
Question
My current layout is this: Say I want to dim the entire body when I hover over "More Info" in the navbar and show some information on the newly dimmed body, over everything that was there before; how would I go about doing that?
Everything I have found so far seems to use the fact that what you are trying to dim is the child of what you are hovering over, but if what I am hovering over is a navbar list item, I don't think I can do that, because I will need paragraphs to write the information I want to display. My Code is as follows:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pupillometer</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="hide.css">
</head>
<body>
<div class="container">
<nav class="navbar">
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Product">Product</a></li>
<li><a href="#Contact">Contact</a></li>
<li class = "More"><a href="#"><div class="Para"></div>More Info</a></li>
</ul>
</nav>
<div class="Moreinfo">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
color: white;
font: arial sans-serif;
width: 100%;
height: 100vh;
background-color: #333;
overflow: hidden;
background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;;
}
.container {
width: 100%;
height: 100%;
overflow-y: scroll;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
.container {
width: 100%;
height: 100vh;
}
.navbar {
position: fixed;
display: flex;
top:0;
width: 100%;
height: 60px;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
}
.navbar ul {
display: flex;
list-style: none;
justify-content: center;
align-items: center;
}
.navbar ul li {
margin: 0 1rem;
padding: 1.5rem;
}
.navbar ul li a {
text-decoration: none;
color: white;
transition: color 0.25s ease-in;
}
.navbar ul li a:hover {
text-decoration: none;
color: skyblue;
}
.navbar ul li.More:hover a {
color: red;
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100vh;
scroll-snap-align: center;
}
section h1 {
font-size: 4rem;
}
section p {
font-size: 1.5rem;
}
.Moreinfo {
background:rgba(0,0,0,0.2);
width:100%;
height:100%;
position:absolute;
top: 60px;
display:none;
margin:0 auto;
overflow:hidden;
z-index: 1;
}
.navbar ul li.More:hover + .Moreinfo{
display: block;
}
5 answers
solution1
1 2019-11-21 09:57:45
I think you are asking to show a div on hover.
Here is what I have tried. Please have a look at the code.
body{ background-color:lightblue; color:white; }.more_info{ background:rgba(0,0,0,0.2); width:100%; height:100%; position:absolute; display:none; margin:0 auto; overflow:hidden; } h1{ cursor:pointer; } h1:hover +.more_info{ display:block; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <h1>More info</h1> <div class="more_info"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry, Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. when an unknown printer took a galley of type and scrambled it to make a type specimen book, It has survived not only five centuries, but also the leap into electronic typesetting. remaining essentially unchanged, It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages. and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </body> </html>
You can even add more listeners.
solution2
1 2019-11-21 10:27:55
I have done something using jquery. This may be helpful.
$( '.navbar.more' ).hover(function() { $( '.moreinfo' ).toggleClass( "show" ); });
* { margin: 0; padding: 0; } body { color: white; font: arial sans-serif; width: 100%; height: 100vh; background-color: #333; overflow: hidden; background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;; }.container { position: relative; width: 100%; height: 100%; overflow-y: scroll; scroll-behavior: smooth; scroll-snap-type: y mandatory; }.container { width: 100%; height: 100vh; }.navbar { position: sticky; top:0; z-index: 99999; display: flex; width: 100%; height: 60px; background: rgba(0, 0, 0, 0.85); justify-content: center; }.navbar ul { display: flex; list-style: none; justify-content: center; align-items: center; }.navbar ul li { margin: 0 1rem; padding: 1.5rem; }.navbar ul li a { text-decoration: none; color: white; transition: color 0.25s ease-in; }.navbar ul li a:hover { text-decoration: none; color: skyblue; }.navbar ul li.More:hover a { color: red; } section { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100vh; scroll-snap-align: center; } section h1 { font-size: 4rem; } section p { font-size: 1.5rem; }.moreinfo { display: none; position: absolute; top: 60px; right: 0; bottom: 0; left: 0; background-color: rgba(17, 17, 17, 0.7); padding: 15px; }.show { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Pupillometer</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="hide.css"> </head> <body> <div class="container"> <nav class="navbar"> <ul> <li><a href="#Home">Home</a></li> <li><a href="#About">About</a></li> <li><a href="#Product">Product</a></li> <li><a href="#Contact">Contact</a></li> <li class="more"><a href="#"><div class="Para"></div>More Info</a></li> </ul> </nav> <div class="moreinfo"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> </body> </html>
solution3
1 ACCPTED 2019-11-21 11:50:40
$( '.More' ).hover(function() {
$( '.Moreinfo' ).toggleClass( "show" );
});
Please check below link for exact what you want.
Please follow my codepen link
solution4
0 2019-11-21 09:40:54
Add the following code in css
.dim {
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:1 !important;
background-color:black;
filter: alpha(opacity=75); /* internet explorer */
-khtml-opacity: 0.75; /* kht`enter code here`ml, old safari */
-moz-opacity: 0.75; /* mozilla, netscape */
opacity: 0.75; /* fx, safari, opera */
}
Then add the "dim" class to the body while listening the navigation hover
solution5
0 2019-12-20 00:25:08
The easiest and the way I use for my web apps is adding this value in my navbar class.navbarclass{ background-color:rgba(0,0,0,0.1) } the last value can be anything between 0.1 to 0.9
0.1 lightest 0.9 darkest
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to make NavBar hover dropdown effect work in html and css
How do I have a navbar and body loaded from other html and update by the navbar?
How to make image responsive in navbar html + css
How to create a moving navbar CSS HTML?
Navbar hover, show subnav html
How to solve Navbar overlap with body content or other page in CSS
Cover HTML Navbar in CSS
Pure CSS navbar :Hover on List not staying
How to apply CSS to HTML body element?
How to best make a hover navbar?
Related Tags