Question

可以使用什么css / js函数使我的左侧边栏隐藏/显示在鼠标悬停上，所以如果我的鼠标位于屏幕中间某处，则代码中的google iframe将显示在整个页面上，但是如果我放了我的鼠标在左边，侧边栏是可见的，谷歌iframe的尺寸会更小？

＆＃13;

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;
}

＆＃13;

<!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">&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>
			  </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>

＆＃13;

Answer 1

您可以使用.mouseover()和.mouseout()

处理活动

要更改元素的大小，请查看.height()和.width()

尝试阅读JQuery文档，那里解释的一切都很好：

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

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

我希望有帮助

鼠标悬停时隐藏/显示左侧边栏

1 个答案: