Question

我想知道点击一个网格然后它会出现另一个网格的简单方法吗？我仍在试图找到一种方法来做到这一点。我被卡住了......

取消选中

点击

这里是代码，有一个容器和一个12格的页脚，我试图找出是否有一种方法可以隐藏11个网格，如果我取消第一个网格，然后单击第一个网格使右侧的其余网格显示

＆＃13;

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  
  padding: 0 15px;
}
.container .text-muted {
 
}

.btn-sq-xs {
  width: 50px !important;
  height: 50px !important;
 
}

＆＃13;

<html >
  <head>
    <!--<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>-->
    <!--<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>-->
    
    <!-- Custom styles for this template -->
    <link href="css/sticky-footer-navbar.css" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
<body>
  <!-- Begin page content -->
  <div class="container">
    <div class="page-header">
      <h1>Container</h1>
    </div>
  </div>
  
  <footer class="footer">
    <div class="container">
      
    
    <div class="row show-grid">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>

    </div>
  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

Answer 1

根据HTML的外观，您可能会执行以下操作：

然后在CSS中：

.hover-target {
    display: none;
}
.hover-trigger ~ .hover-target {
    display: block;
}

Bootstrap：悬停在网格中以弹出另一个网格

1 个答案: