html - 悬停时将子 Div 放入父 Div

Question

我有一个子 div，悬停时需要显示在其父 div 之上。子 div 似乎不遵守父 div 的填充限制，因此更大。

我发现我可以在父级上使用边距而不是填充，但是这会破坏 Bootstrap 列布局并强制将第 3 个 div 放入下一行，这是不可取的。

总结一下:如何使用边距而不是填充使悬停的 div 与其父级宽度相同？

http://jsfiddle.net/tu40thL8/3/

<div class="col-sm-12 col-xs-12" id="search-result">
    <div class="row" id="searchResults">
        <div id="result-list" class="results">
            <div class="col-sm-4 col-xs-6 resultsinner">
                <div class="result resultSolidHover">DIV1 TEXT</div>
                <div class="resultHoverButton"> <a href="#" class="viewButton">VIEW</a>

                </div>
            </div>
            <div class="col-sm-4 col-xs-6 resultsinner">
                <div class="result resultSolidHover">DIV2 TEXT</div>
                <div class="resultHoverButton"> <a href="#" class="viewButton">VIEW</a>

                </div>
            </div>
            <div class="col-sm-4 col-xs-6 resultsinner">
                <div class="result resultSolidHover">DIV3 TEXT</div>
                <div class="resultHoverButton"> <a href="#" class="viewButton">VIEW</a>
LALALAL</div>
            </div>
        </div>
    </div>
</div>

.resultHoverButton {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #364048;
    background-size: cover;
}
.resultsinner:hover .resultHoverButton {
    display:block !important;
    visibility:visible !important;
}
.resultSolidHover {
    background-color: yellow;
    padding:0 20px;
    border-style: solid;
    border-width: 1px;
}

Answer 1

有两种方法可以获得您想要的行为。

1. 您可以在悬停时显示/隐藏相关元素； http://jsfiddle.net/tu40thL8/15/ . [首选]
2. 定义悬停时与 Bootstrap padding(15px) 相关的正确绝对定位； http://jsfiddle.net/tu40thL8/17/ .

选项 1 最简单，可以将您与 Bootstraps 实现分离开来。使用此选项，当您将鼠标悬停时，您将隐藏 .resultSolidHover

.resultsinner:hover .resultSolidHover {
    display:none;
}

这允许您删除为 resultHoverButton 定义的所有绝对定位，如下所示；

.resultHoverButton {
    display: none;
    background-color: #364048;
}

选项 2 依赖于让您的绝对定位正确。 Bootstrap 为 15px 的列定义了填充。这意味着当您绝对定位悬停按钮时，它需要有 15px 的 left 和 right。只需将 resultHoverButton 的类定义更改为；

.resultHoverButton {
    display: none;
    position: absolute;
    top: 0%;
    left: 15px;
    right: 15px;
    height: 100%;
    background-color: #364048;
    background-size: cover;
}