Bootstrap：懸停在網格中彈出另一個網格

我想知道有一個簡單的方法來點擊一個網格，然後它會使另一個網格？我仍然在想辦法做到這一點。我堅持......Bootstrap：懸停在網格中彈出另一個網格

取消勾選

點擊

下面的代碼，有一個容器內，用12格頁腳，我想弄清楚如果有方法可以從右側隱藏11個網格，如果我點擊第一個網格，然後單擊第一個網格使右邊的網格顯示爲

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

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

來源

2015-10-20 AndyHe

什麼是你的HTML的樣子喜歡？你可能能夠使用一般兄弟組合（〜） – BurningLights

你有什麼嘗試？ Stackoverflow不是一種編碼服務。請顯示你的嘗試，並解釋你遇到的具體錯誤。 –

根據您的HTML是什麼樣子，你也許能夠做這樣的事情：

然後在CSS：

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

來源

2015-10-20 20:50:46 BurningLights

Bootstrap：懸停在網格中彈出另一個網格

回答

相關問題