堆栈内存溢出
  简体   繁体   English

在另一个div悬停时隐藏一个div

[英]Hide one div on hover of another div

 原文  2016-12-18 21:04:38  6   4    javascript/ jquery/ html/ css/ css3

问题描述

I'm creating a sidebar navigation. 我正在创建侧边栏导航。 I want the circles (.circle-indicator) to disappear when the sidebar (.nav-sidebar) expands on hover. 我希望当边栏（.nav-sidebar）悬停扩展时，圆圈（.circle-indicator）消失。 Can this be done with CSS or do I need to use javascript? 可以使用CSS完成此操作，还是需要使用JavaScript？ How would I do this? 我该怎么做？

Here's the code for the page 这是页面的代码 

 body { margin:-20px; } .nav-sidebar { position:fixed; width:10px; background-color:#000; color:#fff; height: 100vh; padding: 100px 20px 0 20px; white-space: nowrap; } .nav-sidebar:hover { width:300px; transition-duration:1s; } .nav-sidebar a { color:#fff; text-decoration: none; font-size: 2em; } .nav-sidebar ul { list-style:none; } .nav-sidebar sidebar-links li { padding-bottom:1em; } .nav-sidebar .circle-indicator { position:fixed; left:-33px; top:40vh; } .nav-sidebar .circle-indicator ul li { margin-bottom:1em; display:block; border:1px solid #fff; border-radius: 10px; width:10px; height:10px; padding:0; } .nav-sidebar .circle-indicator ul li a:active { background-color:#fff; } 
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <div class="nav-sidebar"> <div class="circle-indicator"> <ul> <li><a href="#" alt="Item 1"></a></li> <li><a href="#" alt="Item 2"></a></li> <li><a href="#" alt="Item 3"></a></li> <li><a href="#" alt="Item 4"></a></li> <li><a href="#" alt="Item 5"></a></li> </ul> </div> <!-- end circle-indicator --> <div class="sidebar-links"> <ul> <li><a href="#" alt="Item 1">Item 1</a></li> <li><a href="#" alt="Item 2">Item 2</a></li> <li><a href="#" alt="Item 3">Item 3</a></li> <li><a href="#" alt="Item 4">Item 4</a></li> <li><a href="#" alt="Item 5">Item 5</a></li> </ul> </div> <!-- end sidebar-links --> </div> <!-- end nav-sidebar --> </body> </html>

4 个解决方案

解决方案1
 1  2016-12-18 21:07:31

Use 采用 

.nav-sidebar:hover .circle-indicator{
    display:none;
}


 body { margin:-20px; } .nav-sidebar { position:fixed; width:10px; background-color:#000; color:#fff; height: 100vh; padding: 100px 20px 0 20px; white-space: nowrap; } .nav-sidebar:hover { width:300px; transition-duration:1s; } .nav-sidebar a { color:#fff; text-decoration: none; font-size: 2em; } .nav-sidebar ul { list-style:none; } .nav-sidebar sidebar-links li { padding-bottom:1em; } .nav-sidebar .circle-indicator { position:fixed; left:-33px; top:40vh; } .nav-sidebar .circle-indicator ul li { margin-bottom:1em; display:block; border:1px solid #fff; border-radius: 10px; width:10px; height:10px; padding:0; } .nav-sidebar .circle-indicator ul li a:active { background-color:#fff; } .nav-sidebar:hover .circle-indicator{ display:none; } 
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <div class="nav-sidebar"> <div class="circle-indicator"> <ul> <li><a href="#" alt="Item 1"></a></li> <li><a href="#" alt="Item 2"></a></li> <li><a href="#" alt="Item 3"></a></li> <li><a href="#" alt="Item 4"></a></li> <li><a href="#" alt="Item 5"></a></li> </ul> </div> <!-- end circle-indicator --> <div class="sidebar-links"> <ul> <li><a href="#" alt="Item 1">Item 1</a></li> <li><a href="#" alt="Item 2">Item 2</a></li> <li><a href="#" alt="Item 3">Item 3</a></li> <li><a href="#" alt="Item 4">Item 4</a></li> <li><a href="#" alt="Item 5">Item 5</a></li> </ul> </div> <!-- end sidebar-links --> </div> <!-- end nav-sidebar --> </body> </html>

解决方案2
 1  2016-12-18 21:07:52

This rule will do that 这条规则可以做到 

.nav-sidebar:hover .circle-indicator {
    display: none;
}

Or with a transition 或过渡 

.nav-sidebar:hover .circle-indicator {
    opacity: 0;
    transition: opacity 0.5s;
}

Sample snippet 样本片段 

 body { margin:-20px; } .nav-sidebar { position:fixed; width:10px; background-color:#000; color:#fff; height: 100vh; padding: 100px 20px 0 20px; white-space: nowrap; } .nav-sidebar:hover { width:300px; transition-duration:1s; } .nav-sidebar:hover .circle-indicator { opacity: 0; transition: opacity 0.5s; } .nav-sidebar a { color:#fff; text-decoration: none; font-size: 2em; } .nav-sidebar ul { list-style:none; } .nav-sidebar sidebar-links li { padding-bottom:1em; } .nav-sidebar .circle-indicator { position:fixed; left:-33px; top:40vh; } .nav-sidebar .circle-indicator ul li { margin-bottom:1em; display:block; border:1px solid #fff; border-radius: 10px; width:10px; height:10px; padding:0; } .nav-sidebar .circle-indicator ul li a:active { background-color:#fff; } 
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <div class="nav-sidebar"> <div class="circle-indicator"> <ul> <li><a href="#" alt="Item 1"></a></li> <li><a href="#" alt="Item 2"></a></li> <li><a href="#" alt="Item 3"></a></li> <li><a href="#" alt="Item 4"></a></li> <li><a href="#" alt="Item 5"></a></li> </ul> </div> <!-- end circle-indicator --> <div class="sidebar-links"> <ul> <li><a href="#" alt="Item 1">Item 1</a></li> <li><a href="#" alt="Item 2">Item 2</a></li> <li><a href="#" alt="Item 3">Item 3</a></li> <li><a href="#" alt="Item 4">Item 4</a></li> <li><a href="#" alt="Item 5">Item 5</a></li> </ul> </div> <!-- end sidebar-links --> </div> <!-- end nav-sidebar --> </body> </html>

解决方案3
 1  2016-12-18 21:09:50

Good answers by LGSon and Brad, but I'd do it with opacity and a transition . LGSon和Brad给出了很好的答案，但我会做到opacity和transition 。 You cannot transition dispay: none 您无法过渡dispay: none 

 body { margin:-20px; } .nav-sidebar { position:fixed; width:10px; background-color:#000; color:#fff; height: 100vh; padding: 100px 20px 0 20px; white-space: nowrap; } .nav-sidebar:hover { width:300px; transition-duration:1s; } .nav-sidebar a { color:#fff; text-decoration: none; font-size: 2em; } .nav-sidebar ul { list-style:none; } .nav-sidebar sidebar-links li { padding-bottom:1em; } .nav-sidebar .circle-indicator { position:fixed; left:-33px; top:40vh; transition: opacity 1s; } .nav-sidebar .circle-indicator ul li { margin-bottom:1em; display:block; border:1px solid #fff; border-radius: 10px; width:10px; height:10px; padding:0; } .nav-sidebar .circle-indicator ul li a:active { background-color:#fff; } .nav-sidebar:hover .circle-indicator { opacity: 0; } 
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <div class="nav-sidebar"> <div class="circle-indicator"> <ul> <li><a href="#" alt="Item 1"></a></li> <li><a href="#" alt="Item 2"></a></li> <li><a href="#" alt="Item 3"></a></li> <li><a href="#" alt="Item 4"></a></li> <li><a href="#" alt="Item 5"></a></li> </ul> </div> <!-- end circle-indicator --> <div class="sidebar-links"> <ul> <li><a href="#" alt="Item 1">Item 1</a></li> <li><a href="#" alt="Item 2">Item 2</a></li> <li><a href="#" alt="Item 3">Item 3</a></li> <li><a href="#" alt="Item 4">Item 4</a></li> <li><a href="#" alt="Item 5">Item 5</a></li> </ul> </div> <!-- end sidebar-links --> </div> <!-- end nav-sidebar --> </body> </html>

解决方案4
 0  2016-12-18 21:09:54

You can create this effect with the following styles 您可以使用以下样式创建此效果 

<style>
  .nav-sidebar:hover .circle-indicator {
    display:none;
  }
</style>


 body { margin:-20px; } .nav-sidebar { position:fixed; width:10px; background-color:#000; color:#fff; height: 100vh; padding: 100px 20px 0 20px; white-space: nowrap; } .nav-sidebar:hover { width:300px; transition-duration:1s; } .nav-sidebar a { color:#fff; text-decoration: none; font-size: 2em; } .nav-sidebar ul { list-style:none; } .nav-sidebar sidebar-links li { padding-bottom:1em; } .nav-sidebar .circle-indicator { position:fixed; left:-33px; top:40vh; } .nav-sidebar .circle-indicator ul li { margin-bottom:1em; display:block; border:1px solid #fff; border-radius: 10px; width:10px; height:10px; padding:0; } .nav-sidebar .circle-indicator ul li a:active { background-color:#fff; } .nav-sidebar:hover .circle-indicator { display:none; } 
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <div class="nav-sidebar"> <div class="circle-indicator"> <ul> <li><a href="#" alt="Item 1"></a></li> <li><a href="#" alt="Item 2"></a></li> <li><a href="#" alt="Item 3"></a></li> <li><a href="#" alt="Item 4"></a></li> <li><a href="#" alt="Item 5"></a></li> </ul> </div> <!-- end circle-indicator --> <div class="sidebar-links"> <ul> <li><a href="#" alt="Item 1">Item 1</a></li> <li><a href="#" alt="Item 2">Item 2</a></li> <li><a href="#" alt="Item 3">Item 3</a></li> <li><a href="#" alt="Item 4">Item 4</a></li> <li><a href="#" alt="Item 5">Item 5</a></li> </ul> </div> <!-- end sidebar-links --> </div> <!-- end nav-sidebar --> </body> </html>

暂无
暂无

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

相关问题 Jquery悬停并隐藏另一个div - Jquery hover and hide another div 当将鼠标移出两个div时隐藏div，但如果将鼠标悬停在一个或另一个上则不隐藏 - Hide a div, when mouseout two divs, but not if you are hover one or another 悬停在一个div中，触发效果悬停在另一个中 - hover in one div that trigger the effect hover in another 单击时显示div，如果将鼠标悬停在另一个上则隐藏 - show div on click and hide if hover on another 隐藏一个div并显示另一个？ - Hide one div and show another? 在div之外的悬停鼠标上隐藏div - Hide a div on hover outside of div 在悬停事件上隐藏div - on hover event hide the div 隐藏一个div，取消隐藏另一个div，滚动到新的未隐藏div - Hide one div, unhide another div, scroll to the new unhidden div 在一个元素上悬停切换div，在另一个元素上切换div？ - toggle div on hover of one element, and off another? div悬停另一个绝对中心jQuery - div hover another one absolute center jquery
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM