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

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


change the css tag visible to display, as I shown in the code.

Answer 2

如果您想更改高度，请不要使用高度但使用行高。 height属性编辑高度，行高垂直对齐内容。正确的代码应该是：

＆＃13;

.tile {
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
        background: #000;
        padding: 20px;
        margin-bottom: 30px;
        line-height: 70%;
        min-width: 100%;
        -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;
        }

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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>
</body>
</html>

＆＃13;

在div悬停时显示<p>

2 个答案: