如何擴大一個div山坳中引導懸停

我使用程序來構建一個頁面。我有一個部分，其中有6個不同的部分（連續3個）。如何擴大一個div山坳中引導懸停

<div class="row"> 
    <div class="col-md-4"> 
    <div style="background:#ababab">Lorium ispum</div> 
    </div> 
    <div class="col-md-4"> 
    <div style="background:#ababab">Lorium ispum</div> 
    </div> 
    <div class="col-md-4"> 
    <div style="background:#ababab">Lorium ispum</div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-4"> 
    <div style="background:#ababab">Lorium ispum</div> 
    </div> 
    <div class="col-md-4"> 
    <div style="background:#ababab">Lorium ispum</div> 
    </div> 
    <div class="col-md-4"> 
    <div style="background:#ababab">Lorium ispum</div> 
    </div> 
</div>

我試圖擴大col過度鼠標容器的整個寬度。同時，其他col部分將消失。

我努力去適應了通過jQuery來隱藏鼠標的所有5周的cols。但不知道如何擴大容器。任何人都可以幫我解決這個問題嗎？如果您需要任何幫助，請告訴我。

來源

2014-03-03 user1012181

使用jQuery只是隱藏的DIV改變徘徊DIV的類是COL-MD-12，而不是同事MD-4。然後在mouseout上改回課程並顯示隱藏的DIV。 –

http://jsfiddle.net/arunpjohny/9BLr3/1/ –

您可以使用jQuery的懸停方法：

$('.col-md-4').hover(function() { 
    var $this = $(this); 
    $this.removeClass('col-md-4').addClass('col-md-12'); 
    $this.siblings('.col-md-4').hide(); 
}, function() { 
    var $this = $(this); 
    $this.removeClass('col-md-12').addClass('col-md-4'); 
    $this.siblings('.col-md-4').show(); 
});

這裏是一個工作的jsfiddle：http://jsfiddle.net/k958H/

來源

2014-03-03 15:39:50 HJ05

不只是兄妹所有其他5個元素必須被隱藏 –

這裏是隱藏所有的元素，但隱藏跨行元素，因爲徘徊的時候可能會產生問題提琴第二行隱藏第一行，導致底行向上移動並觸發鼠標移出事件。 http://jsfiddle.net/k958H/1/ – HJ05

如何擴大一個div山坳中引導懸停

回答

相關問題