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