HTML / CSS：将鼠标悬停在部分显示的元素上时出现自动scoll问题

Question

我用css和html here创建了几个块。当悬停在块上时，它会显示一些其他文本。 我的问题是，当部分显示时，每行中的第一个块会自动滚动悬停。

我该如何解决这个问题？

我忘了说我在谷歌浏览器版本66.0上测试了这个

这是css和html编码

＆＃13;

＆＃13;

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;
    }

＆＃13;

<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>    

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试此代码

       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>