как расширить div col в начальной загрузке при наведении

Question

как расширить div col в начальной загрузке при наведении

0

Я использую 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 будут исчезнуть.

Я попытался приспособиться, чтобы скрыть все 5 колод на мыши через jQuery. Но не знаю, как расширить контейнер. Может ли кто-нибудь помочь мне решить это? Если вам нужна помощь, просто дайте мне знать.

user1012181 03 март 2014, в 16:32

Источник

1

Используя jQuery, просто скрывайте DIV, измените класс наведенного DIV на col-md-12, а не на col-md-4. А при наведении мыши измените класс обратно и покажите скрытые DIV.
Billy Moat 03 март 2014, в 15:34
0

jsfiddle.net/arunpjohny/9BLr3/1
Arun P Johny 03 март 2014, в 15:34

Теги:

jquery

html

css

1 ответ

Ещё вопросы

Используя jQuery, просто скрывайте DIV, измените класс наведенного DIV на col-md-12, а не на col-md-4. А при наведении мыши измените класс обратно и покажите скрытые DIV.

HJ05 · Accepted Answer · 2014-03-03T12-46-00.000Z

Вы можете использовать метод наведения 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/

не только братья и сестры все остальные 5 элементов должны быть скрыты
Вот скрипка для скрытия всех элементов, но скрытие элементов по строкам может быть проблематичным, потому что при наведении курсора на второй ряд вы скрываете первый ряд, в результате чего нижний ряд перемещается вверх и запускает событие отсутствия мыши. jsfiddle.net/k958H/1