Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 06.01.2021, 07:56   #1
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 406
По умолчанию Изменить ширину grid колонки при наведении

Подскажите как изменить ширину колонки grid контейнера при наведении т.е. типа аккордеона.
пример
Большая часть кода создает программа поэтому максимально отталкиваться от этих настроек, код который сам добавил закомментировал:

Код:
#FlexGrid2 {
    display: grid;
    background-color: transparent;
    background-image: none;
    border: 0px solid #CCCCCC;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 0px;
    grid-column-gap: 1px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "col1 col2 col3 col4 col5 col6 col7";
     
     /*overflow: hidden;
      align-items: center;*/
}

#FlexGrid2 > div {
  display: flex;
    background-color: transparent;
    background-image: none;
    border: 0px solid #FFFFFF;
    padding: 0;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: center;
    align-items: center;
    -webkit-align-content: center;
    align-content: center;
    
   /* width: 100%;
    height: 100%;
    transition: all .3s linear;*/
}

#FlexGrid2 img {
    margin: 0;
    vertical-align: top;
    border: 0px solid #000000;
    box-sizing: border-box;
    padding: 0;
    display: block;
    width: 100%;
   height: auto;
    max-width: 270px;
    margin-left: auto;
    margin-right: auto;
    vertical-align: top;
}
/*#FlexGrid2 > div:hover{
  cursor: pointer;
  width: 200%;
  margin: -50% 0;
}*/
Еду медленно, но верно!

Последний раз редактировалось spoon100500; 06.01.2021 в 07:59.
spoon100500 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с определением номера колонки Grid при FixedCols := 1 KBO Общие вопросы Delphi 2 16.03.2017 14:02
Изменить ширину колонки в таблице access ольгаг SQL, базы данных 1 21.02.2013 18:14
String grid - изменить содержимое ячейки при определенном условии Vova777 Общие вопросы Delphi 1 07.09.2011 23:32
Как изменить шрифт при наведении на ссылку webx WordPress и другие CMS 0 17.05.2011 11:08
Изменить цвет ссылок при наведении Gatti HTML и CSS 1 01.10.2009 23:08