如何在悬停时在引导程序中展开div col [英] how to expand a div col in bootstrap on hover

问题描述

我使用bootstrap来建立一个页面。我有一个部分，其中有6个不同的部分（3行一排）。

I'm using bootstrap to build a page. I have a section in which there is 6 different sections (3 in a row).

<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 部分将会消失。

I'm trying to expand a col to the full width of the container on mouse over. Meanwhile, the other col sections will be disappeared.

我试图适应隐藏鼠标上的所有5个cols通过jQuery。但不知道如何扩展容器。任何人都可以帮我解决这个问题？如果你需要任何帮助，只是让我知道。

I tried to adapt to hide the all 5 cols on mouse over through jQuery. But don't know how to expand the container. Can anybody help me to solve this? If you need any help, just let me know.

推荐答案

您可以使用jQuery的hover方法：

You can use jQuery's hover method:

$('.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/

Here is a working jsFiddle: http://jsfiddle.net/k958H/

这篇关于如何在悬停时在引导程序中展开div col的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！