Hover 在 DIV 上（增加高度 - 顶部和底部）而不影响其他 DIV

Question

我有这个悬停 div 元素的问题。 我想在 hover 上从顶部和底部增加 div 的高度，但是，它会移动其他 div。 这是笔。 谢谢您的帮助！

仅示例代码

<div class="container text-center key-industries">
        <h2 class="margin-bottom-sm"><span class="text-gradient">9 Key</span> Industries</h2>
        <div class="row">
            <div class="col-lg-4 col-md-12 text-center grey-box">
                <h3>LOREM IPSUM</h3>
                <span class="number-shadow">01</span>
                    <ul>
                        <li>Web Design</li>
                        <li>Graphic Design</li>
                        <li>Search Engine Optimization (SEO)</li>
                        <li>PPC Advertising </li>
                    </ul>
            </div>
            <div class="col-lg-4 col-md-12 text-center grey-box">
                <h3>LOREM IPSUM</h3>
                <span class="number-shadow">02</span>
                    <ul>
                        <li>Web Design</li>
                        <li>Graphic Design</li>
                        <li>Search Engine Optimization (SEO)</li>
                        <li>PPC Advertising </li>
                    </ul>
            </div>
            <div class="col-lg-4 col-md-12 text-center grey-box">
                <h3>LOREM IPSUM</h3>
                <span class="number-shadow">03</span>
                    <ul>
                        <li>Web Design</li>
                        <li>Graphic Design</li>
                        <li>Search Engine Optimization (SEO)</li>
                        <li>PPC Advertising </li>
                    </ul>
            </div>
        </div>
    </div>

Answer 1

with css when you hover over an element with class "grey-box" and changing the style of this class on hover keep in mind that all other boxes have the same class name "grey-box" then height of all boxes will be effected. . 因为所有盒子都有 class “灰盒”，所以有两种解决方案要么给每个盒子一个不同的 class，如 b1、b2、b3、b4 或其他解决方案是使用 ZDE9B9ED78D7E2E1DCEEFFEE780E2F919 元素并在整个事件上使用循环。 您也可以观看此内容，以更好地直观理解代码codemyui