CSS Grid: добавление div в первый столбец и увеличение его на 100% при наведении - PullRequest
0 голосов
/ 06 декабря 2018

Я начал разработку веб-страницы с использованием CSS3 Grid и наткнулся на проблему, для которой не могу найти решение.

В основном у меня есть контейнерный элемент div, который я заполняю следующим образом:

#pages {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(30%,1fr));
    grid-template-rows: repeat(auto-fit, minmax(300px, auto));
    justify-items: stretch;
    grid-gap: var(--gridgap);
    grid-column: 1 / 1;
    grid-row: 2;
    color: black;
}

HTML выглядит примерно так:

<div id="pages">
        <article class="pagecard">
            <div class="cardheader">
                <h1> Page1 </h1>
            </div>

            <div class="carddesc">
            <p> orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has</p>
            </div>
        </article>

        <article class="pagecard">
            <div class="cardheader">
            <h1> Page2 </h1>
            </div>
            <div class="carddesc">
            <p> Description test</p>
            </div>
        </article>

        <article class="pagecard">
            <div class="cardheader">
            <h1> Page3 </h1>
            </div>
            <div class="carddesc">
            <p> Description test</p>
            </div>
        </article>

...

Обычно это приводит к 3 контейнерам на строку.То, что я хочу сделать, - это создать контейнер, охватывающий всю строку, когда он находится над ним.

Я попытался сделать это так:

.pagecard:hover{
grid-column: 1 / -1;

}

Этокажется, хорошо работает для элемента, который находится в столбце 1. Когда курсор мыши находится над ним, он будет охватывать весь ряд, и все другие элементы будут правильно перемещены к следующему.

Однако, когда я пытаюсь навести курсор наэлемент в строке 1 столбца 2, вместо того, чтобы располагаться в столбце 1 и затем растягиваться, толкая элемент влево на следующую строку, сам элемент переходит на следующую строку.Из-за этого эффекта он теряет зависание и начинает «прыгать» взад и вперед.

Это можно решить, используя только CSS и HTML?

В основном, при наведении курсора на элемент № 2 в виде сеткикак:

1 2 3

4 5 6

Это должно привести к

2 2 2

1 3 4

6

Надеюсь, кто-нибудь может указать мне правильное направление.

Заранее спасибо!

РЕДАКТИРОВАТЬ:

Я думаю, это будетможно решить с помощью javascript путем вычисления строки ячейки, а затем установки grid-row: currentRow дополнительно к grid-column.Однако мне интересно, есть ли решение только для CSS!

1 Ответ

0 голосов
/ 06 декабря 2018

Боюсь, у вас проблема с CSS.Вы сказали

В основном, когда вы наводите курсор на элемент № 2 в сетке, выглядя так:

1 2 3

4 5 6

Itдолжно привести к

2 2 2

1 3 4

6

Теперь, если ваша мышь перемещается и зависает над 1 (ввторой ряд), 2 2 2 в первом ряду заменяется на 1 1 1, а 1 во втором ряду заменяется на 2. Затем вы получаете

1 1 1

2 34

Это будет вызывать мерцание, когда ваша мышь «зависает» над номером 1, поэтому запускается зависание на 1, затем происходит переключение, и ваша мышь теперь на 2, затем наведите курсор на 1 и т. Д. И т. Д. И т. Д.

См. Ниже.

#pages {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(30%,1fr));
    grid-template-rows: repeat(auto-fit, minmax(300px, auto));
    justify-items: stretch;
    grid-gap: var(--gridgap);
    grid-column: 1 / 1;
    grid-row: 2;
    color: black;
}

#pages>article{
    border: 1px solid black;
}

.pagecard:hover{
  grid-column: 1 / 4;
  grid-row: 1;
}
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">

<link rel="stylesheet" type = "text/css" href="./stylesheets/style.css">
</head>

<body>
    <div id="pages">
        <article class="pagecard">
            <div class="cardheader">
                <h1> Page1 </h1>
            </div>

            <div class="carddesc">
                <p> orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has</p>
            </div>
        </article>

        <article class="pagecard">
            <div class="cardheader">
                <h1> Page2 </h1>
            </div>
            <div class="carddesc">
                <p> Description test</p>
            </div>
        </article>

        <article class="pagecard">
            <div class="cardheader">
                <h1> Page3 </h1>
            </div>
            <div class="carddesc">
                <p> Description test</p>
            </div>
        </article>

                <article class="pagecard">
                    <div class="cardheader">
                        <h1> Page4 </h1>
                    </div>
                
                    <div class="carddesc">
                        <p> orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has</p>
                    </div>
                </article>
                
                <article class="pagecard">
                    <div class="cardheader">
                        <h1> Page5 </h1>
                    </div>
                    <div class="carddesc">
                        <p> Description test</p>
                    </div>
                </article>
                
                <article class="pagecard">
                    <div class="cardheader">
                        <h1> Page6 </h1>
                    </div>
                    <div class="carddesc">
                        <p> Description test</p>
                    </div>
                </article>


    </div>
</body>
...