堆栈内存溢出
  简体   繁体   English

如何从导航栏 hover HTML CSS 使主体变暗？

[英]How to dim the body from navbar hover HTML CSS?

 原文  2019-11-21 09:24:16  9   5    javascript/ html/ css

问题描述

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;假设我想在导航栏中的“更多信息”上进行 hover 时使整个机身变暗，并显示有关新变暗机身的一些信息，而不是之前的所有内容； 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 个解决方案

解决方案1
 1  2019-11-21 09:57:45

I think you are asking to show a div on hover.我认为您要求在 hover 上显示一个 div。

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.您甚至可以添加更多侦听器。

解决方案2
 1  2019-11-21 10:27:55

I have done something using jquery.我使用 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>

解决方案3
 1 已采纳  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请按照我的codepen链接

解决方案4
 0  2019-11-21 09:40:54

Add the following code in css在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然后在听导航hover的同时将“dim”class添加到body

解决方案5
 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我用于 web 应用程序的最简单的方法是在我的导航栏中添加这个值 class.navbarclass{ background-color:rgba(0,0,0,0.1) } 最后一个值可以是 0.1 到 0.9 之间的任何值

0.1 lightest 0.9 darkest 0.1 最亮 0.9 最暗

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使 NavBar hover 下拉效果在 html 和 css 中工作 - How to make NavBar hover dropdown effect work in html and css 如何从其他 html 加载导航栏和正文并通过导航栏更新？ - How do I have a navbar and body loaded from other html and update by the navbar? 如何在导航栏中使图像响应 html + css - How to make image responsive in navbar html + css 如何创建一个移动的导航栏 CSS HTML？ - How to create a moving navbar CSS HTML? 导航栏悬停，显示subnav html - Navbar hover, show subnav html 如何解决Navbar与CSS正文内容或其他页面重叠的问题 - How to solve Navbar overlap with body content or other page in CSS 在CSS中介绍HTML导航栏 - Cover HTML Navbar in CSS 纯CSS导航栏：悬停在列表上不会停留 - Pure CSS navbar :Hover on List not staying 如何将CSS应用于HTML body元素？ - How to apply CSS to HTML body element? 如何最好地制作悬停导航栏？ - How to best make a hover navbar?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM