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

Question

我遇到了悬停 div 元素的问题。我想在悬停时从顶部和底部增加 div 的高度，但是，它会移动其他 div。这是pen。感谢您的帮助！

仅示例代码

<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

当您将鼠标悬停在具有类“grey-box”的元素上并在悬停时更改此类的样式时使用 css 请记住，所有其他框具有相同的类名称“grey-box”，然后所有框的高度将受到影响..因为所有盒子都有“灰盒”类，有两种解决方案要么给每个盒子一个不同的类，如 b1、b2、b3、b4，要么其他解决方案是使用 javascript 并循环遍历所有元素并使用 onmouseover 事件.您也可以观看此视频，以更好地直观理解代码 codemyui