Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 18.05.2019
Сообщений: 84
1

hover сдвигает другой контент

18.01.2020, 10:26. Показов 1039. Ответов 5

Всем привет,
Есть вопрос у меня есть карточки 3*3 и вот у них есть hover{border: 1px solid #d6d6d6, padding: 10px}
И при наведение на карточки сам hover то появляется но в мести с ним другие карточки немного сдвигаются и все контент сайта тоже. Так вот как задать это hover фиксировано? Я что то сылашал мол через absolute можно но при задавание position: absolute hover'u который делает border все начинает ломается.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.01.2020, 10:26
Ответы с готовыми решениями:

Применить свойство hover через другой объект
Здравствуйте Структура такова: <div class="bl1"> <div class="bl11" </div> ...

CSS (hover) отменить действие последнего hover на все элементы
Всем доброго времени суток. У меня следующая загвоздка: нашел скрипт для выпадающих меню. Подогнал...

Нужно при клике, исключить события hover, во. И еще глюки .hover. Отключение .hover в случае активации .click
Нужно при клике, исключить события hover, во. И 1. Глюки .hover: При наведении на блок, к...

Переход подложки на другой элемент списка меню по hover
Здравствуйте. Я новичок, учу jquery по книге Эрла Каслдайна и Крейга Шарки "Изучаем jquery". В...

5
Модератор
Эксперт HTML/CSS
1472 / 979 / 469
Регистрация: 13.03.2010
Сообщений: 3,607
18.01.2020, 18:42 2
Задайте элементу box-sizing: border-box.

Так же, при ховере у вас применяется padding. Возможно, причина в этом.
0
237 / 160 / 67
Регистрация: 18.06.2016
Сообщений: 509
18.01.2020, 18:50 3
Цитата Сообщение от jhiugh1i1 Посмотреть сообщение
но при задавание position: absolute hover'u который делает border все начинает ломается.
дайте код, а так да без абсолютного позиционирования элемент не выпадает из dom и сдвигает остальные элементы
0
0 / 0 / 0
Регистрация: 18.05.2019
Сообщений: 84
18.01.2020, 18:51  [ТС] 4
Я задал всем карточкам box-sizing: border-box но нет все так же есть траблы.
И да padding мне нужен что бы border незадевал элементы в card'ах.
0
Модератор
Эксперт HTML/CSS
1472 / 979 / 469
Регистрация: 13.03.2010
Сообщений: 3,607
18.01.2020, 18:56 5
jhiugh1i1, так у вас из-за padding всё и съезжает
0
0 / 0 / 0
Регистрация: 18.05.2019
Сообщений: 84
18.01.2020, 19:30  [ТС] 6
Я проверил и без padding тоже сдвигается хоть почти незаметно но мне прям позарез нужен padding так как border слишком близки к контенту в card's
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 </section>
    <section class="section production">
      <div class="container">
        <div class="production__start">
          <h2 class="title production__title">Каталог продукции</h2>
          <img src="img/mug_small.png" alt="" class="production__img">
        </div>
        <div class="row production__row">
          <div class="col-30 production__column">
            <div class="production__card--1 tostyle">
              <img src="img/production/prod_1.png" alt="" class="production__card_img">
              <h3 class="production__card_name">Хлеб</h3>
              <p class="production__card_about">Lorem Ipsum - это текст-"рыба", часто используемый в печати и
                вэб-дизайне. Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не
                совсем так.</p>
              <button class="production__card_button">просмотреть</button>
            </div>
            <div class="production__card--2 tostyle">
              <img src="img/production/prod_4.png" alt="" class="production__card_img">
              <h3 class="production__card_name">Кондитерские</h3>
              <p class="production__card_about">Lorem Ipsum - это текст-"рыба", часто используемый в печати и
                вэб-дизайне. Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не
                совсем так.</p>
              <button class="production__card_button">просмотреть</button>
            </div>
          </div>
          <div class="col-30 production__column">
            <div class="production__card--3 tostyle">
              <img src="img/production/prod_2.png" alt="" class="production__card_img">
              <h3 class="production__card_name">Хлебушки</h3>
              <p class="production__card_about">Lorem Ipsum - это текст-"рыба", часто используемый в печати и
                вэб-дизайне. Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не
                совсем так.</p>
              <button class="production__card_button">просмотреть</button>
            </div>
            <div class="production__card--4 tostyle">
              <img src="img/production/prod_5.png" alt="" class="production__card_img">
              <h3 class="production__card_name">Хлебцы</h3>
              <p class="production__card_about">Lorem Ipsum - это текст-"рыба", часто используемый в печати и
                вэб-дизайне. Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не
                совсем так.</p>
              <button class="production__card_button">просмотреть</button>
            </div>
          </div>
          <div class="col-30 production__column">
            <div class="production__card--5 tostyle">
              <img src="img/production/prod_3.png" alt="" class="production__card_img">
              <h3 class="production__card_name">булочки</h3>
              <p class="production__card_about">Lorem Ipsum - это текст-"рыба", часто используемый в печати и
                вэб-дизайне. Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не
                совсем так.</p>
              <button class="production__card_button">просмотреть</button>
            </div>
            <div class="production__card--6 tostyle">
              <img src="img/production/prod_6.png" alt="" class="production__card_img">
              <h3 class="production__card_name">Мюсли</h3>
              <p class="production__card_about">Lorem Ipsum - это текст-"рыба", часто используемый в печати и
                вэб-дизайне. Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не
                совсем так.</p>
              <button class="production__card_button">просмотреть</button>
            </div>
          </div>
        </div>
      </div>
    </section>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
.production
  padding-top: 3rem
  padding-bottom: 3rem
  &__row
    flex-flow: wrap 
    justify-content: space-around
  &__column
    position: relative
  &__title
    color: #1b1b1b
    font-size: 32px
    font-weight: 400
    line-height: 34px
 
  &__start
    text-align: center
    
  &__img
      margin-top: -8px
  &__row
    text-align: center
    align-items: baseline
  &__card
    &--4
      margin-top: 80px
    &--6
      margin-top: 24px
    &:last-child
      margin-top: 20px
    // position: relative
    // transition: 3s
 
    &_img
    &_name
      color: #1b1b1b
      font-size: 18px
      font-weight: bold
      text-transform: uppercase
    &_about
      color: #1b1b1b
      font-family: Roboto
      font-size: 15px
      font-weight: 300
      line-height: 21px
    &_button
      outline: none
      border: 1px solid #e64132
      color: #e64132
      font-family: Roboto
      font-size: 14px
      font-weight: bold
      line-height: 21px
      text-transform: uppercase
      background-color: #fff
      padding: 15px 24px
      &:hover
        background-color: #e64132
        color: #fff
        
.tostyle
  &:hover
      // position: absolute
      border: 1px solid #d6d6d6
      padding: 10px
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
18.01.2020, 19:30

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Как перенести контент с одного сервера на другой
Здравствуйте. Подскажите пожалуйста, можно ли каким либо образом перенести контент (содержимое...

Вывести на странице только контент с другой страницы
Всем привет Необходимо вывести со страницы http://khl24.ru/news/ только новости на др. сайт....

Как перенести контент по клику с одного столбца в другой
Есть два столбца с айтемами, при клике на один из айтемов он должен улететь в совершенно другой...

Как изменить контент frame другой xaml страницы?
Привет. Есть три xaml страницы. Главная где есть frame, страница меню и страница выбора одно из...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.