在鼠标悬停上隐藏/显示左侧栏

问题描述:

可以使用什么css/js功能让我的左侧栏隐藏/显示鼠标悬停,因此如果我的鼠标位于屏幕中间某处,将显示代码中的Google iframe在整个页面上,但是如果我将鼠标放在左侧,侧边栏将会显示,并且谷歌iframe的尺寸会减小?在鼠标悬停上隐藏/显示左侧栏

body { 
 
    padding-top: 70px; /* Padding for .navbar-fixed-top. Change value if navbar height changes. Remove if using .navbar-static-top. */ 
 
} 
 

 
h1, h2, h3, h4, h5, h6 { 
 
\t color: black; 
 
\t } 
 

 
#side-carousel img { 
 
\t margin: 0 auto; 
 
\t } 
 

 
.footer-blurb { 
 
    padding: 30px 0; 
 
    margin-top: 20px; 
 
    background-color: #eee; 
 
    color: black; 
 
} 
 
    
 
.footer-blurb-item { 
 
    padding: 20px; 
 
    } 
 
    
 
.small-print { 
 
\t background-color: #fff; 
 
\t padding: 30px 0; 
 
} 
 

 
.feature, 
 
.page-intro, 
 
.article-intro, 
 
.small-print { 
 
\t text-align: center; 
 
\t } 
 
\t 
 
\t .extra { 
 
    display: none; 
 
} 
 

 
p:hover .extra { 
 
    display: block; 
 
} 
 

 
.box{ 
 
    display: none; 
 
    width: 100%; 
 
} 
 

 
a:hover + .box,.box:hover{ 
 
    display: block; 
 
    position: relative; 
 
    z-index: 100; 
 
} 
 

 
* { 
 
\t box-sizing: border-box; 
 
} 
 

 
#myInput { 
 
    background-image: url('/css/searchicon.png'); 
 
    background-position: 10px 12px; 
 
    background-repeat: no-repeat; 
 
    width: 100%; 
 
    font-size: 10px; 
 
    padding: 12px 20px 12px 40px; 
 
    border: 1px solid #ddd; 
 
    margin-bottom: 12px; 
 
} 
 

 
#myUL { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#myUL li a { 
 
    border: 1px solid #ddd; 
 
    margin-top: -1px; /* Prevent double borders */ 
 
    background-color: #f6f6f6; 
 
    padding: 6px; 
 
    text-decoration: none; 
 
    font-size: 12px; 
 
    color: black; 
 
    display: block 
 
} 
 

 
#myUL li a.header { 
 
    background-color: #e2e2e2; 
 
    cursor: default; 
 
} 
 

 
#myUL li { 
 
\t display: none; 
 
} 
 

 
#myUL li a:hover:not(.header) { 
 
    background-color: #eee; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 

 
    <title>Testing Page</title> 
 

 
    <!-- Bootstrap Core CSS --> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles --> 
 
    <link href="css/custom.css" rel="stylesheet"> 
 

 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 

 
</head> 
 

 
<body> 
 

 
    <!-- Navigation --> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
     <div class="container"> 
 
      <!-- Logo and responsive toggle --> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
      </div> 
 
      
 

 
\t \t \t <!-- Search --></div> 
 
      <!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container --> 
 
    </nav> 
 

 
<div class="container-fluid"> 
 

 
\t \t <!-- Left Column --> 
 
    <div style="overflow: hidden; margin: 1px auto; max-width: 2736px;"> 
 
      <iframe src="http://google.com" width="2500px" height="1200"> </iframe> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
<div class="panel panel-default"> 
 
<center> 
 
<p><center><center><b> 
 
<p class="tooltip-inner">asasassa</p> 
 
<p class="tooltip-inner">as</p> 
 
<p class="tooltip-inner">sa</p> 
 
<p class="tooltip-inner">as</p> 
 
<p class="tooltip-inner">asas</p> 
 
<p class="tooltip-inner">&nbsp;</p> 
 
<p class="tooltip-inner">as</p> 
 
<p class="tooltip-inner">as</p> 
 
<p class="tooltip-inner">as</p> 
 
<p class="tooltip-inner">asas</p> 
 
<p class="tooltip-inner">as</p> 
 
<p class="tooltip-inner">s</p> 
 
<p class="tooltip-inner">a</p> 
 
</b> 
 
</div></div> 
 
</div> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <!-- List-Group Panel --><!--/Left Column--> 
 
    
 
    
 
\t \t <!-- Center Column --> 
 
    <div class="col-sm-6"> 
 
\t \t 
 
\t \t \t <!-- Alert --> 
 
\t \t \t 
 
\t \t 
 
\t \t \t <!-- Articles --> 
 
\t \t \t <div class="row"></div> 
 
\t <div class="row"></div> 
 
\t <div class="row"></div> 
 
    </div><!--/Center Column--> 
 

 

 
\t <!-- Right Column --><!--/Right Column --> 
 

 
</div><!--/container-fluid--><!-- jQuery --> 
 
    <script src="js/jquery-1.11.3.min.js"></script> 
 

 
    <!-- Bootstrap Core JavaScript --> 
 
    <script src="js/bootstrap.min.js"></script> 
 
\t 
 
\t <!-- IE10 viewport bug workaround --> 
 
\t <script src="js/ie10-viewport-bug-workaround.js"></script> 
 
\t 
 
\t <!-- Placeholder Images --> 
 
\t <script src="js/holder.min.js"></script> 
 
\t 
 
    <!-- Searchable Driver List --> 
 
\t <script src="js/driverlist.js"></script> 
 
</body> 
 

 
</html>

您可以处理与.mouseover().mouseout()

的事件来改变一个元素的大小来看看.height().width()

尝试通过jQuery来读docs所有内容都有相当好的解释:

https://api.jquery.com/mouseout/

http://api.jquery.com/height/

我希望帮助