悬停时增加 div 的高度，但只能使用 CSS ......为什么？答案

【问题标题】：Increasing height of a div when hovering it but only with CSS... why?悬停时增加 div 的高度，但只能使用 CSS ......为什么？
【发布时间】：2014-11-06 02:59:41
【问题描述】：

也许是我编码的时间，但我可以理解为什么会发生这种情况。仅使用 CSS 和 HTML，此代码使 div 的高度在用户每次悬停时增加 1 px（我估计）。我不知道为什么会发生这种情况，这不是 CSS 悬停应该做的事情，我明白了...... 不是很重要，但很好奇。只需复制粘贴，您就会看到。事情是，当我添加“barrainferior-cell-selected”类时，一切都来了。这就是产生这种不寻常行为的人......

<!DOCTYPE html>
<html>
    <head>
        <style>
            .barrainferior {
                display:table;
                position:fixed;
                top:auto;
                bottom:0;
                right:0;
                left:0;
                width:100%;
                border-bottom:0px solid #FFF;
                background-color:#3C62D5;
            }
            .barrainferior-row {
                display:table-row;
                width: 100%;
                height:100%;
                margin:0;
            }
            .barrainferior-cell {
                display:table-cell;
                width:20%;
                height:100%;
                margin:0;
                padding:0;
                border-top:1px solid #444444;
                border-right:1px solid #444444;
                text-align:center;
                cursor:pointer;
                transition:background 0.25s linear;
            }
            .barrainferior-cell:first-child {
                border-left:0px solid #FFF;
            }
            .barrainferior-cell:last-child {
                border-right:0px solid #FFF;
            }
            .barrainferior-cell:hover {
                background-color:#4A87EE;
                border-top:0px solid white;
            }
            .barrainferior-cell-selected {
                background-color:#4A87EE;
                border-top:none;
            }
            .barrainferior-iconowrapper {
                display:table;
            }
            .barrainferior-icono {
                display:table-cell;
                height:19px;
                width:auto;
                padding-top:3px;
                padding-bottom:3px;
                vertical-align:middle;
            }
            .sinbordederecho {
            }
        </style>
        <body>
            <div class="barrainferior">
                <div class="barrainferior-row">
                    <div class="barrainferior-cell barrainferior-cell-selected" id="icono-home">
                        <div class="barrainferior-cell-iconowrapper">
                            <img class="barrainferior-icono" src="img/icons/home-white.png" />
                        </div>
                    </div>
                    <div class="barrainferior-cell" id="icono-document">
                        <div class="barrainferior-cell-iconowrapper">
                            <img class="barrainferior-icono" src="img/icons/document-white.png" />
                        </div>
                    </div>
                    <div class="barrainferior-cell" id="icono-git">
                        <div class="barrainferior-cell-iconowrapper">
                            <img class="barrainferior-icono" src="img/icons/social-github-white.png" />
                        </div>
                    </div>
                    <div class="barrainferior-cell" id="icono-world">
                        <div class="barrainferior-cell-iconowrapper">
                            <img class="barrainferior-icono" src="img/icons/ios7-world-outline-white.png" />
                        </div>
                    </div>
                    <div class="barrainferior-cell sinbordederecho" id="icono-person">
                        <div class="barrainferior-cell-iconowrapper">
                            <img class="barrainferior-icono" src="img/icons/person-white.png" />
                        </div>
                    </div>
                </div>
            </div>
        </body>
</html>

对不起代码的优美，但我不明白 StackOverflow 代码编辑器的要求是什么……对不起……

【问题讨论】：

你创建一个 jsfiddle 怎么样？
感谢美化代码。感谢您的关注，LJ_1102。似乎事情是“barrainferior-cell”的“高度：100％”属性，当悬停重新建立时，它一直在“赢”1px的高度。现在用“height:auto”完成。感谢您的关注！

标签： html css class hover height

【解决方案1】：

.barrainferior-cell:hover {
     background-color:#4A87EE;
     border-top:1px solid #444444;
}

我认为this 是你想要的

【讨论】：

实际上，就是这样。默认情况下，“height”属性的值为“auto”，我只是明确地这样做了。谢谢你的例子，帕西。