У меня есть div, в котором содержится p. Я бы хотел спрятать p, пока div не зависнет. Когда div завис, я хотел бы изменить высоту div и отобразить букву p внизу div.

Ниже то, что у меня есть, в настоящее время он вообще не отвечает ...

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>
0
Code 18 Апр 2016 в 22:21

2 ответа

Лучший ответ
   .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.
1
Riot Zeast Captain 18 Апр 2016 в 19:47

Если вы хотите изменить высоту, используйте не высоту, а высоту строки. Свойство height редактирует высоту, line-height выравнивает содержимое по вертикали. Правильный код должен быть:

.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;
        }
<!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>
0
Mattew 18 Апр 2016 в 19:49