堆棧內存溢出
  簡體   English   中英

如何從導航欄 hover HTML CSS 使主體變暗？

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

 原文  2019-11-21 09:24:16  1   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