悬停并转换div而不移动其他div
问题描述：
我想放大并显示鼠标悬停在div上的一些额外信息。 我正在使用引导网格，躺在鼠标houvering div下面的div是定位。悬停并转换div而不移动其他div
我的代码是在这里：
#each_p .product-section {
max-width: 400px;
margin: 20px auto;
overflow:hidden;
position: relative;
}
#each_p .product-section:hover {
border: 1px solid #717070;
background-color: #fff;
box-shadow: 0 6px 12px rgba(0, 0, 0, .275);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
transform: scale(1.1);
overflow: visible;
}
#each_p .product-section:hover .details {
transform: translateY(0%);
display:block;
z-index:100;
}
#each_p .product-section img {
width: 250px;
display: block;
margin: 0 auto;
}
#each_p .product-section .details {
display: none;
transition: transform .2s linear, opacity .2s ease-in-out;
transform: translateY(-100%);
text-align: center;
font-size: 16px;
z-index:0;
margin: 2px;
}
#each_p h4 {
margin-top: 50px;
font-size: 30px !important;
}
#each_p h5{
font-size: 20px;
text-align: center;
}<div id="each_p">
<div class="row">
\t <div class="col-md-4 col-sm-6">
\t \t \t <div class="product-section">
\t \t \t \t <img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
\t \t \t \t <h5> Cabinet_1 </h5>
\t \t \t \t <div class="details">
\t \t \t \t \t <p> PRICE : 19000 Yen </p>
\t \t \t \t \t <p> Size : 162 X 72 X 80 cm </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
<div class="col-md-4 col-sm-6">
\t \t \t <div class="product-section">
\t \t \t \t <img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
\t \t \t \t <h5> Cabinet_2 </h5>
\t \t \t \t <div class="details">
\t \t \t \t \t <p> PRICE : 19000 Yen </p>
\t \t \t \t \t <p> Size : 162 X 72 X 80 cm </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
<div class="col-md-4 col-sm-6">
\t \t \t <div class="product-section">
\t \t \t \t <img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
\t \t \t \t <h5> Cabinet_3 </h5>
\t \t \t \t <div class="details">
\t \t \t \t \t <p> PRICE : 19000 Yen </p>
\t \t \t \t \t <p> Size : 162 X 72 X 80 cm </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
<div class="col-md-4 col-sm-6">
\t \t \t <div class="product-section">
\t \t \t \t <img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
\t \t \t \t <h5> Cabinet_4 </h5>
\t \t \t \t <div class="details">
\t \t \t \t \t <p> PRICE : 19000 Yen </p>
\t \t \t \t \t <p> Size : 162 X 72 X 80 cm </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
<div class="col-md-4 col-sm-6">
\t \t \t <div class="product-section">
\t \t \t \t <img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
\t \t \t \t <h5> Cabinet_5 </h5>
\t \t \t \t <div class="details">
\t \t \t \t \t <p> PRICE : 19000 Yen </p>
\t \t \t \t \t <p> Size : 162 X 72 X 80 cm </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
</div>
</div>
</div>我需要的div是在自己的位置并在鼠标悬停在它上面要显示的额外的文本。 非常感谢您的帮助。
答
#each_p .product-section {
border: 1px solid transparent;
max-width: 400px;
margin: 20px auto;
overflow:hidden;
position: relative;
transform: scale(1);
transition: all 0.5s ease;
}
#each_p .product-section:hover {
border: 1px solid #717070;
background-color: #fff;
box-shadow: 0 6px 12px rgba(0, 0, 0, .275);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
transform: scale(1.1);
}
#each_p .product-section:hover .details {
transform: translateY(0%);
visibility: visible;
opacity: 1;
z-index:100;
}
#each_p .product-section img {
width: 250px;
display: block;
margin: 0 auto;
}
#each_p .product-section .details {
transition: transform .2s linear, opacity .2s ease-in-out;
transform: translateY(-100%);
text-align: center;
font-size: 16px;
z-index:0;
margin: 2px;
visibility: hidden;
opacity: 0;
}
#each_p h4 {
margin-top: 50px;
font-size: 30px !important;
}
#each_p h5{
font-size: 20px;
text-align: center;
}<div id="each_p">
<div class="row">
\t <div class="col-md-4 col-sm-6">
\t \t \t <div class="product-section">
\t \t \t \t <img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
\t \t \t \t <h5> Cabinet_1 </h5>
\t \t \t \t <div class="details">
\t \t \t \t \t <p> PRICE : 19000 Yen </p>
\t \t \t \t \t <p> Size : 162 X 72 X 80 cm </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
<div class="col-md-4 col-sm-6">
\t \t \t <div class="product-section">
\t \t \t \t <img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
\t \t \t \t <h5> Cabinet_2 </h5>
\t \t \t \t <div class="details">
\t \t \t \t \t <p> PRICE : 19000 Yen </p>
\t \t \t \t \t <p> Size : 162 X 72 X 80 cm </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
<div class="col-md-4 col-sm-6">
\t \t \t <div class="product-section">
\t \t \t \t <img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
\t \t \t \t <h5> Cabinet_3 </h5>
\t \t \t \t <div class="details">
\t \t \t \t \t <p> PRICE : 19000 Yen </p>
\t \t \t \t \t <p> Size : 162 X 72 X 80 cm </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
<div class="col-md-4 col-sm-6">
\t \t \t <div class="product-section">
\t \t \t \t <img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
\t \t \t \t <h5> Cabinet_4 </h5>
\t \t \t \t <div class="details">
\t \t \t \t \t <p> PRICE : 19000 Yen </p>
\t \t \t \t \t <p> Size : 162 X 72 X 80 cm </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
<div class="col-md-4 col-sm-6">
\t \t \t <div class="product-section">
\t \t \t \t <img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
\t \t \t \t <h5> Cabinet_5 </h5>
\t \t \t \t <div class="details">
\t \t \t \t \t <p> PRICE : 19000 Yen </p>
\t \t \t \t \t <p> Size : 162 X 72 X 80 cm </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
</div>
</div>
</div>
，你能否告诉任何例如对于相同的，你想请...？ –
http://www.ikea.com/jp/en/catalog/categories/departments/bedroom/16284/ –
以上是我想要创建的示例。只需通过悬停在图像上进行检查即可 –