I know for sure that with the help of css you can do this, but how?

a:hover -> ..

    3 answers 3

    Something like this:

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

    • A "~" need? or can be without? - goodalien pm
    • one
      @ goodalien1125, in this case - you just need to put all the content in the link - this is semantically stupid. Therefore, we use the neighbor selection selector (it is possible and + , but this is not particularly important). - user207618
    • For sure! I completely forgot about the related selectors. Thank you for reminding me)). - Astor
    • @Astor, please. - user207618

    Option:

     div { width: 300px; height: 0; background: #cdcdcd; transition-duration: 1s; } a:hover div { height: 300px; ) 
     <a href="#">Наведи на меня <div></div> </a>

      This is also possible - my 5 kopecks

       *{ 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>

      • Mm, what a picture) - goodalien