Jquery 如何在hover引导中扩展div列

我正在使用引导构建一个页面。我有一个部分，其中有6个不同的部分（一行3个）

淫羊藿
淫羊藿
淫羊藿
淫羊藿
淫羊藿
淫羊藿

我正在尝试将

列

扩展到鼠标悬停时容器的全宽。同时，其他

col

部分将消失

---

我试着通过jQuery在鼠标上隐藏所有5个col。但不知道如何扩展容器。有人能帮我解决这个问题吗？如果你需要帮助，就告诉我

您可以使用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();
});

---

下面是一个正在工作的JSFIDLE:

使用jQuery只需隐藏DIV即可将悬停DIV的类更改为col-md-12而不是col-md-4。在mouseout上更改类并显示隐藏的div。不仅兄弟元素所有其他5个元素都必须隐藏这里有一个隐藏所有元素的提琴，但是跨行隐藏元素可能会有问题，因为当悬停第二行时，隐藏第一行会导致底部行向上移动并触发mouse out事件。

$('.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();
});