Fit Child Div Внутри родителя Div on Hover

Question

У меня есть дочерний div, который должен отображаться поверх родителя при зависании. По-видимому, дочерний div не уважает ограничения на добавление div родителя и, следовательно, больше.

Я обнаружил, что я могу использовать поле вместо заполнения на родительском объекте, однако это разбивает макет столбца начальной загрузки и заставляет 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. Определите правильное абсолютное позиционирование при наведении в соответствии с заполнением бутстрапа (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 и right15px. Простое изменение определения класса для resultHoverButton;

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

Answer 2

Это потому, что вы делаете то, что хотите, позиционируя его абсолютно. Абсолютное положение будет перемещать его из потока и руководствоваться позициями left, top и т. Д. И, почему вы используете visibility здесь, действительно не требуется вообще.

Держите это просто и сделать это таким образом, только изменяя display по наведению для детей:

.resultHoverButton { 
    display: none; 
    background-color: #364048; 
    border: 1px solid #ccc; 
} 
.resultSolidHover { 
    background-color: yellow; 
    padding:0 20px; 
    border: 1px solid #ccc; 
} 
.resultsinner:hover .resultSolidHover { 
    display:none; 
} 
.resultsinner:hover .resultHoverButton { 
    display:block; 
} 

Обновлено Fiddle: http://jsfiddle.net/tu40thL8/10/

Answer 3

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; 
}