我在这里用 css 和 html 创建了几个块。当悬停在块上时，它会显示一些额外的文本。我的问题是每行中的第一个块在部分显示时会在悬停时自动滚动。
我怎样才能解决这个问题？
我忘了说我正在谷歌浏览器版本 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>