Question

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

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

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

<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

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

您可以在悬停时显示/隐藏相关元素; http://jsfiddle.net/tu40thL8/15/。 [首选选项]
在悬停中定义正确的绝对定位，与Bootstrap填充（15px）相关联; http://jsfiddle.net/tu40thL8/17/。

选项1最简单，并将您与Bootstraps实现分离。使用此选项时，您可以隐藏.resultSolidHover

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

这允许您取出为resultHoverButton定义的所有绝对定位，如下所示;

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

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

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

Answer 2

Example Codepen

你好检查一下，我不确定这是不是你要找的。

<div class="resultOut">
     <div class="resultInner"><h1>Hello World!</h1></div>
</div>

*{
  margin:0;
  padding:0;
}

.resultOut{
  position:relative;
  width:500px;
  height:200px;
  background:yellow;
}

.resultInner{
  visibility:hidden;
  position:absolute;
  width:100%;
  height:100%;
  background:red;
}

.resultOut:hover .resultInner{
  visibility:visible;
}

.resultInner h1{
  text-align:center;
  line-height:200px;
}

在悬停时父母Div内适合儿童Div

2 个答案: