html - 在 div 悬停时显示

Question

我有一个 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>

Answer 1

<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.