@aless233

Не работает свойство Transition?

Цель: Создать блок Div, при наведении которого появляется ещё один блок с данными, и таблицей...
Вопрос: Как реализовать плавное появление не только блока, но и таблицы отдельно?
Ключевой момент в css: .animatablichka.
Заранее спасибо!;)
Вот код:
<style type="text/css">
.fonskart{
padding-top:80px;
width:920px;
height:600px;
background-image:url('http://pyryatyn.adm-pl.gov.ua/sites/pyryatyn.adm-pl.gov.ua/files/images/sams.jpg');
}
.punktikblok{
width:20px;
height:30px;
margin:0px 460px 0px 460px;
display:block;
position:relative;
transition-duration:1s;
}
.yarlik{
width:20px;
height:30px;
}
.descr{
    display: block;
    position: absolute;
    background: #ededed;
    color: #555;
    font-size: 14px;
    padding: 7px 20px;
    line-height: 18px;
    margin-top: 20px;
    opacity: 0;
    visibility: hidden;
width:250px;
height:200px;
    -webkit-transition: opacity 0.3s, margin-top 0.3s, visibility 0s linear 0.3s;
    -moz-transition: opacity 0.3s, margin-top 0.3s, visibility 0s linear 0.3s;
    -o-transition: opacity 0.3s, margin-top 0.3s, visibility 0s linear 0.3s;
    transition: opacity 0.3s, margin-top 0.3s, visibility 0s linear 0.3s;
transition-duration:1s;
box-shadow:0px 0px 10px #E1E1E1;
}
.punktikblok:hover .descr {
   margin-top: 0;
        opacity: 1;
        visibility: visible;
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s;
}
 .punktikblok_fixed .descr {
        pointer-events: none;
    }
    .punktikblok_fixed:hover .descr {
        pointer-events: auto;
    }
.kartinkavkvad{
width:80px;
height:80px;
float:right;
padding-top:0px;
margin-top:0px;
border-radius:10px;
}
.descr:hover .animatablichka{
width:150px;
transition-delay: 0s;
}
.animatablichka{
transition-duration:1s;
width:100px;
}
.tablichka{
float:left;
width:auto;
height:auto;
}
.blokdlyakartink{
float:right;
}</style>
<div class="fonskart">
	<div class="punktikblok">
		<div class="descr">
			<div style="width:auto; height:auto; border-bottom:3px solid #fff;margin-bottom:5px;">
				<span style="display: block; color:#444649; font-weight:bold; text-align:center;">КРОТИ</span></div>
			<div class="tablichka">
				<table class="animatablichka" style="padding: 5px; border: 1px solid rgb(51, 51, 51);">
					<tbody>
						<tr>
							<td>
								Площа, га</td>
							<td>
								5,5</td>
						</tr>
					</tbody>
				</table>
				<a href="#">Интересная ссылка</a></div>
			<div class="blokdlyakartink">
				<a><img class="kartinkavkvad" src="http://pyryatyn.adm-pl.gov.ua/sites/pyryatyn.adm-pl.gov.ua/files/images/kroti55.jpg" /></a></div>
		</div>
		<a href="#"><img class="yarlik" href="#" src="http://pyryatyn.adm-pl.gov.ua/sites/pyryatyn.adm-pl.gov.ua/files/images/small.png" /></a></div>
</div>
  • Вопрос задан
  • 443 просмотра
Пригласить эксперта
Ответы на вопрос 1
drymind404
@drymind404
front-end разработчик
Если блок не должен занимать место на странице, то display: none и visibility: hidden. При hover возвращайте display и visibility. И пишите названия классов логичные и на английском языке без транслита, а так же не используйте inline встраивание стилей без крайней необходимости)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы