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

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

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

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

Hover on DIV (increase height - top and bottom) without affecting other DIVs

html

hover