什么 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 {
color: black;
}
#side-carousel img {
margin: 0 auto;
}
.footer-blurb {
padding: 30px 0;
margin-top: 20px;
background-color: #eee;
color: black;
}
.footer-blurb-item {
padding: 20px;
}
.small-print {
background-color: #fff;
padding: 30px 0;
}
.feature,
.page-intro,
.article-intro,
.small-print {
text-align: center;
}
.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;
}
* {
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 {
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>
<!-- Search --></div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container-fluid">
<!-- 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"> </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>
</div>
</div>
<!-- List-Group Panel --><!--/Left Column-->
<!-- Center Column -->
<div class="col-sm-6">
<!-- Alert -->
<!-- Articles -->
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div><!--/Center Column-->
<!-- 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>
<!-- IE10 viewport bug workaround -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<!-- Placeholder Images -->
<script src="js/holder.min.js"></script>
<!-- Searchable Driver List -->
<script src="js/driverlist.js"></script>
</body>
</html>最佳答案
您可以使用 .mouseover() 和 .mouseout() 处理事件
要更改元素的大小，请查看 .height() 和 .width()
尝试通读 JQuery 文档，那里的所有内容都解释得很好:
https://api.jquery.com/mouseout/
希望对你有帮助
关于javascript - 在鼠标悬停时隐藏/显示左侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43162775/