3

Как при наведении на div заставить увеличиваться его в ширину и отодвигать другие блоки? ( внизу gif для пояснения )

https://im5.ezgif.com/tmp/ezgif-5-363ac9956c13.gif

1
  • флексить умеем?
    – user355286
    9 янв 2020 в 15:03

3 ответа 3

7

Я создал флексовый контейнер, в котором элементам задал flex: 1. Значение flex: 1 для элемента обозначает, что каждому элементу в контейнере задана условная ширина в единицу.
Если соседнему элементу в контейнере задать flex: 2, то его ширина станет в два раза больше, чем у соседей, которым задана условная единица.
Я задал всем флексовым элементам transition: flex 0.3s linear, что значит: значение flex будет анимироваться в течении 0.3 секунд, линейно, т.е. ровно, без скачков.
Я также указал, что при наведении на элемент, его условная ширина станет в два раза больше, чем у соседей, плавность происходит за счёт transition

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}

.wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  min-height: 150px;
}

.flex__item {
  background: #00bfff;
  margin-right: 10px;
  flex: 1;
  transition: flex 0.3s linear;
}

.flex__item:last-child {
  margin-right: 0;
}

.flex__item:hover {
  flex: 2;
}
<div class="wrapper">
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
</div>

Ещё один пример:
Если блок будет переполнен контентом, то он не будет ужиматься, что весьма удобно, так как блоки не будут криво вылезать/ урезаться и контент можно будет прочитать. Блок, который захочет получить ширину в условные две единицы зажмёт другие блоки, если ему будет нужно. Если блоку не хватит места увеличиться в два раза, он увеличится до скольки можно, не урезая контент в других блоках

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  color: white;
}

.wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  min-height: 150px;
}

.flex__item {
  background: #00bfff;
  margin-right: 10px;
  flex: 1;
  transition: flex 0.3s linear;
  padding: 10px;
  white-space: nowrap;
  /* Запретить перенос текста  */
  display: -webkit-flex;
  /* Эти стили, чтобы выровнять контент в блоке по центру  */
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Эти стили, чтобы выровнять контент в блоке по центру  */
}

.flex__item:last-child {
  margin-right: 0;
}

.flex__item:hover {
  flex: 2;
}
<div class="wrapper">
  <div class="flex__item">
    Супер-важный контент<br> Супер-важный контент<br> Супер-важный контент<br>
  </div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
</div>

5
  • 1
    Отдельная благодарность за пояснения
    – mr.yar
    9 янв 2020 в 16:31
  • "Если любому другому элементу в контейнере задать flex: 2 . . ." Данное утверждение не совсем корректно. В данном примере оно работает, но есть ситуации когда это не так.
    – E_K
    9 янв 2020 в 16:58
  • @E_K покажите пример, пожалуйста, я про это не знаю. Я полагаю, если перебить стили с помощью max-width, width, min-width это не будет работать 9 янв 2020 в 17:02
  • codepen.io/AFI/full/WNbzMBB Вариант с white-space, так же зависит и от значения flex-basis.
    – E_K
    9 янв 2020 в 17:15
  • @E_K, ах, да, вы имели ввиду переполнение, сейчас поправлю 9 янв 2020 в 17:20
6

jquery:

$('.square').hover(
  function() {
    $('.square').css('width', '20%');
    $(this).css('width', '50%');
    },
  function() {
    $('.square').css('width', '30%');
  }
)
.wrapper{display:flex;justify-content:space-around}
.square{width:30%;height:100px;border:1px solid;transition:width.3s}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

css:

.wrapper{display:flex;justify-content:space-around}
.square{width:30%;height:100px;border:1px solid;transition:width.3s}
.square:hover{width:50%}
.wrapper:hover .square:not(:hover){width:20%}
<div class="wrapper">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

2

Еще один вариант:

$(document).ready(function() {
  $('#main .strips').hover(function() {
      $('#main .strips').css({
        'width': '15%'
      });
      $(this).css({
        'width': '40%'
      });
    },
    function() {
      $('#main .strips').css({
        'width': '20%'
      });
    });
  $('#main .strips').click(function() {
    if ($(this).hasClass('active')) {
      $('#main .strips').removeClass('hide');
      $(this).removeClass('active');
    } else {
      $('#main .strips').addClass('hide');
      $(this).removeClass('hide').addClass('active');
    }
  });
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.4s ease-in-out;
}

#main,
html,
body {
  height: 100%;
}

#main .strips {
  float: left;
  width: 20%;
  height: 100%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#main .strips:nth-child(1) {
  background: url(https://look.com.ua/pic/201210/1600x1200/look.com.ua-59405.jpg) center no-repeat;
}

#main .strips:nth-child(2) {
  background: url(https://st-gdefon.gallery.world/wallpapers_original/506609_gallery.world.jpg) center no-repeat;
}

#main .strips:nth-child(3) {
  background: url(https://camnang24h.net/wp-content/uploads/2018/04/hinh-nen-chu-meo-ngo-nghinh-dang-yeu-193.jpg) center no-repeat;
}

#main .strips:nth-child(4) {
  background: url(https://img2.akspic.com/image/9840-chartreux-british_longhair-mammal-cat-korat-1280x800.jpg) center no-repeat;
}

#main .strips:nth-child(5) {
  background: url(https://images.wallpaperscraft.com/image/cat_muzzle_fluffy_lie_56489_1600x1200.jpg) center no-repeat;
}

.strips:hover:before {
  transform: skew(-45deg) scale(3) translate(0, 0);
  opacity: 0;
}

.strips:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.3;
  transform-origin: center center;
  transform: skew(-45deg) scaleY(1) translate(0, 0);
  transition: all 0.6s cubic-bezier(0.17, 1, 0.83, 1);
}

.hide {
  width: 0 !important;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

.active {
  width: 100% !important;
  opacity: 1;
  z-index: 10;
  visibility: visible;
}

.active:before {
  content: '';
  display: none;
}

.strips:after,
.active:after {
  content: '';
  display: block;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  width: 70px;
  height: 70px;
  background: url(https://static.dica33.it/cm/img/ico_resp_search.png) center no-repeat;
  border-radius: 70px;
  border: 2px solid lightgray;
  transition: all 1s ease-in-out;
}

.strips:hover:after,
.active:hover:after {
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div class="strips"></div>
  <div class="strips"></div>
  <div class="strips"></div>
  <div class="strips"></div>
  <div class="strips"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.