我有一个 div
,其中包含一个 p
。我想隐藏 p
直到 div
悬停。当 div 悬停时,我想更改 div
的高度并在 div
的底部显示 p。
下面是我所拥有的,目前它根本没有响应......
CSS
.tile {
width: 100%;
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 20px;
margin-bottom: 30px;
height: 135px;
-webkit-transition: height ease 1s;
-moz-transition: height ease 1s;
-o-transition: height ease 1s;
transition: height ease 1s;
}
.hideText {
visibility: hidden;
}
.tile:hover {
height: 260px !important;
}
.hideText:hover {
-webkit-transition: height ease 1s;
-moz-transition: height ease 1s;
-o-transition: height ease 1s;
transition: height ease 1s;
visibility: visible;
}
标记
<div class="col-sm-3">
<div class="tile blue">
<a href="#" style="color: white; text-decoration: none;">
<h3 class="title" style="font-size: 30px !important;"><span class="glyphicon glyphicon-pencil" style="padding-right: 10px;"></span>Is something broken?</h3>
<hr />
<p style="font-size: 19px !important;"><span class="glyphicon glyphicon-info-sign" style="padding-right: 10px;"></span>Hover to view details</p>
<p class="hideText">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</a>
</div>
</div>
最佳答案
<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code> .tile {
width: 100%;
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 20px;
margin-bottom: 30px;
height: 135px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.hideText {
height: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
overflow: hidden;
}
.title:hover .hideText{
height: 260px !important;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
display: block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> <div class="col-sm-3">
<div class="tile blue">
<a href="#" style="color: black; text-decoration: none;">
<div class="title" >
<h3 style="font-size: 30px !important;"><span class="glyphicon glyphicon-pencil" style="padding-right: 10px;"></span>Is something broken?</h3>
<hr />
<p style="font-size: 19px !important;"><span class="glyphicon glyphicon-info-sign" style="padding-right: 10px;"></span>Hover to view details</p>
<p class="hideText">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
</a>
</div>
</div>
</div></code></pre>
</div>
</div>
change the css tag visible to display, as I shown in the code.
关于html - 在 div 悬停时显示 <p>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36702597/