堆栈内存溢出
  繁体   English   中英

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

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

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

问题描述

我目前的布局是这样的：当前布局 假设我想在导航栏中的“更多信息”上进行 hover 时使整个机身变暗，并显示有关新变暗机身的一些信息，而不是之前的所有内容； 我会怎么做呢？

到目前为止我发现的所有东西似乎都使用了这样一个事实，即你试图变暗的是你悬停的子项，但如果我悬停的是导航栏列表项，我认为我不能那样做，因为我需要段落来写我想要显示的信息。 我的代码如下：

<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

我认为您要求在 hover 上显示一个 div。

这是我尝试过的。 请看一下代码。 

 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>

您甚至可以添加更多侦听器。

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

我使用 jquery 做了一些事情。 这可能会有所帮助。 

 $( '.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" );
});

请检查以下链接以了解您想要的确切内容。

请按照我的codepen链接

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

在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 */
}

然后在听导航hover的同时将“dim”class添加到body

解决方案5
 0  2019-12-20 00:25:08

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

0.1 最亮 0.9 最暗

暂无
暂无

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

相关问题 如何使 NavBar hover 下拉效果在 html 和 css 中工作 如何从其他 html 加载导航栏和正文并通过导航栏更新？ 如何在导航栏中使图像响应 html + css 如何创建一个移动的导航栏 CSS HTML？ 导航栏悬停，显示subnav html 如何解决Navbar与CSS正文内容或其他页面重叠的问题 在CSS中介绍HTML导航栏 纯CSS导航栏：悬停在列表上不会停留 如何将CSS应用于HTML body元素？ 如何最好地制作悬停导航栏？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM