1

Точно знаю, что с помощью css можно так сделать, но как?

a:hover -> .. 

3 ответа 3

6

Как-то так:

.content{ /* Скрываем сразу контент */
  display: none;
}
.wrapper a:hover ~ .content{ /* При наведении на ссылку в раппере, откроется контент */
  display: block;
}
<div class='wrapper'>
  <a href='#'>Да, да, на меня наведи</a>
  <div class='content'>Я скрытый контент</div>
</div>

4
  • А "~" нужно? или можно без?
    – goodalien
    7 авг 2016 в 16:09
  • 1
    @goodalien1125, в данном случае - нужно, просто помещать весь контент в ссылку - это семантически глупо. Поэтому используем селектор отбора соседа (можно и +, но тут особо не так уж важно).
    – user207618
    7 авг 2016 в 16:12
  • Точно! Совсем забыл про родственные селекторы. Спасибо, что напомнили)).
    – Astor
    7 авг 2016 в 16:24
  • @Astor, пожалуйста.
    – user207618
    7 авг 2016 в 16:27
2

Вариант:

div {
  width: 300px;
  height: 0;
  background: #cdcdcd;
  transition-duration: 1s;
  }

a:hover div {
  height: 300px;
  )
<a href="#">Наведи на меня
<div></div>
</a>

0

Вот так тоже можно - мои 5 копеек

*{
	margin:0;
	padding:0;
}
.first{
	width:300px;
	height:50px;
	background:yellow;
	margin:20px auto;
	position:relative;
	border-radius:6px;
	line-height:50px;
}
.first:hover{
	border-radius:6px 6px 0 0;
}
.first>p{
	padding-left:20px;
	text-transform:uppercase;
	text-decoration:underline;
	color:blue;
	cursor:pointer;
}

.first .parent{
	position:absolute;
	top:20px; left:0;
	width:300px;
	height:0;
	line-height:1px;
	border-left:2px solid yellow;
	border-right:2px solid yellow;
	border-bottom:2px solid yellow;
	box-sizing:border-box;
    border-radius:0 0 10px 10px;
	transition-duration:1s;
	transition-delay:1s;
	padding:10px;
}
.first .parent img{
	display:block;
	width:0;
	height:0;
	transition:all 1s;
	transition-duration:1s;
	transition-delay:1s;
}
.first:hover .parent img{
	float:left;
	width:45%;
	height:auto;
	margin-top:5px;
	margin-left:5px;
	margin-bottom:-5px;
}
.first .parent p{
	display:block;
	width:90%;
	margin:10px 5px;
	text-align:justify;
	font-size:0;
	transition-duration:1s;
	transition-delay:1s;
	color:#fff;
}
.first:hover .parent{
	position:absolute;
	top:50px; left:0;
	width:300px;
	min-height:390px;
	line-height:16px;
	border-left:2px solid yellow;
	border-right:2px solid yellow;
	border-bottom:2px solid yellow;
	box-sizing:border-box;
    border-radius:0 0 6px 6px;
}
.first:hover .parent p{
	display:block;
	width:90%;
	margin:10px auto;
	text-align:justify;
	font-size:14px;
	color:#000;
}
	<div class="first"> 
	  <p>Наведи на меня</p>
	 <div class="parent">
      <img src="http://ladysovety.ru/wp-content/uploads/2015/01/kakoj-syurpriz-sdelat-muzhu-na-godovshhinu-svadby-300x267.jpg" alt="image" />	 
	   <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
	   </p>
	   <p>Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
	   </p>
	 </div>
	</div>

1
  • Мм, какая картинка)
    – goodalien
    8 авг 2016 в 5:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.