Question

我使用bootstrap构建页面。我有一个部分，其中有6个不同的部分（连续3个）。

<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个字符串。但不知道如何扩展容器。任何人都可以帮我解决这个问题吗？如果您需要任何帮助，请告诉我。

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

如何在悬停时扩展bootstrap中的div col

1 个答案: