HTML / CSS: проблема с автоматической прокруткой при наведении на частично отображаемый элемент - PullRequest
Новая
       40

HTML / CSS: проблема с автоматической прокруткой при наведении на частично отображаемый элемент

0 голосов
/ 28 мая 2018

Я создал пару блоков с помощью CSS и HTML здесь .Он показывает некоторые дополнительные тексты при наведении курсора на блок.У меня проблема в том, что первый блок в каждой строке автоматически прокручивается при наведении курсора, когда он отображается частично.

Как я могу это исправить?

Я забыл сказать, что я тестирую это в GoogleChrome Версия 66.0

Вот код CSS и HTML 

ul.category-blocks {
        display:block;
        margin:0;
        padding:0;
    }
ul.category-blocks > li {
        position:relative;
        display:block;
        list-style:none;
        width:calc(33% - 10px);
        padding:0 0 calc(33% - 10px) 0;
        margin:0 5px 10px 5px;
        float:left;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        background-color:orange;
        background-position:center;
        background-size:100% 100%;
        overflow:hidden;
        border:1px solid #ff5601;
        transition:background 0.3s ease-in-out;
    }
ul.category-blocks > li:hover {
        background-size:105% 105%;
    }
ul.category-blocks > li > div {
        position:absolute;
        background:rgba(249,91,0,0.7);
        color:#fff;
        left:0;right:0;
        bottom:0;
    }
ul.category-blocks > li:hover > div {
        transition:background 1s ease-in-out;
        background:rgba(249,91,0,0.9);
    }
ul.category-blocks > li > div > h2 {
        text-align:center;
        font-size:20px;
        font-weight:700;
    }
ul.category-blocks > li > div > p {
        margin:0;
        padding:0 10px;
        max-height:0;
        font-size:12px;
        text-align:justify;
        transition:all 0.5s ease-in-out;
    }
ul.category-blocks > li:hover > div > p {
        max-height:600px;
        margin-bottom:20px;
    }
ul.category-blocks > li > div > p a.shop-button {
        display:block;
        padding:5px 10px;
        margin:10px auto 0 auto;
        text-align:center;
        width:100px;
        border:1px solid #fff;
        color:#fff;
    }
ul.category-blocks > li > div > p a.shop-button:hover {
        background:#fff;
        color:#ff5601;
    }
<ul class="category-blocks">
            <li>
                <div>
                    <h2>Test Title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
                </div>
            </li>
            <li>
                <div>
                    <h2>Test Title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
                </div>
            </li>
            <li>
                <div>
                    <h2>Test Title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
                </div>
            </li>
            <li>
                <div>
                    <h2>Test Title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
                </div>
            </li>
            <li>
                <div>
                    <h2>Test Title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
                </div>
            </li>
            <li>
                <div>
                    <h2>Test Title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
                </div>
            </li>
            <li>
                <div>
                    <h2>Test Title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
                </div>
            </li>
            <li>
                <div>
                    <h2>Test Title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
                </div>
            </li>
            <li>
                <div>
                    <h2>Test Title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
                </div>
            </li>
            <li>
                <div>
                    <h2>Test Title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
                </div>
            </li>
            <li>
                <div>
                    <h2>Test Title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
                </div>
            </li>
            <li>
                <div>
                    <h2>Test Title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
                </div>
            </li>
        </ul>
        <div style="clear:both;"></div>

1 Ответ

0 голосов
/ 28 мая 2018

Попробуйте этот код 

       ul.category-blocks {
            display:block;
            margin:0;
            padding:0;
        }
        ul.category-blocks > li {
            position:relative;
            list-style:none;
            width:calc(33% - 10px);
            padding:0 0 calc(33% - 10px) 0;
            margin:0 5px 10px 5px;
            float:left;
            overflow:hidden;
            border:1px solid #ff5601;
            transition:500ms all;
            background-color:orange;
        }

        ul.category-blocks > li > div {
            position:absolute;
            background:rgba(249,91,0,0.7);
            color:#fff;
            left:0;right:0;
            bottom: 54px;
            transform: translateY(100%);
            -webkit-transform:  translateY(100%);
            -moz-transform:    translateY(100%);
            -ms-transform:      translateY(100%);
            -o-transform:       translateY(100%);
            transition: 500ms all;
        }
        ul.category-blocks > li > div > h2 {
            text-align:center;
            font-size:20px;
            font-weight:700;
        }
        ul.category-blocks > li > div > p {
            margin:0;
            padding:0 10px;
            font-size:12px;
            text-align:justify;
            transition:500ms all;
        }

        ul.category-blocks > li:hover > div
        {
            transform: translateY(54px);
            -webkit-transform:   translateY(54px);
            -moz-transform:    translateY(54px);
            -ms-transform:       translateY(54px);
            -o-transform:        translateY(54px);
        }
<ul class="category-blocks">
    <li>
        <div>
            <h2>Test Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
        </div>
    </li>
    <li>
        <div>
            <h2>Test Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
        </div>
    </li>
    <li>
        <div>
            <h2>Test Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
        </div>
    </li>
    <li>
        <div>
            <h2>Test Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
        </div>
    </li>
    <li>
        <div>
            <h2>Test Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
        </div>
    </li>
    <li>
        <div>
            <h2>Test Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
        </div>
    </li>
    <li>
        <div>
            <h2>Test Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
        </div>
    </li>
    <li>
        <div>
            <h2>Test Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
        </div>
    </li>
    <li>
        <div>
            <h2>Test Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
        </div>
    </li>
    <li>
        <div>
            <h2>Test Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
        </div>
    </li>
    <li>
        <div>
            <h2>Test Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
        </div>
    </li>
    <li>
        <div>
            <h2>Test Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis vestibulum arcu. Donec eu tortor ac eros consequat ultricies. Nam luctus leo id ipsum vulputate, et interdum mauris lacinia. Praesent auctor egestas blandit. Sed nisi lectus, blandit non enim et,</p>
        </div>
    </li>
</ul>
<div style="clear:both;"></div>
...