Help is needed. There are 2 blocks: 1 visible, 2 invisible.

Direct on visible> appears invisible. Screen attached. I need the second block to remain until the cursor “leaves”. For on the 2nd block there are links to facebook, twitter, etc.

.reiss-ramka { visibility: hidden; display:block; width: 216px; height: 300px; background-color: #00a388; margin-top: -67px; ; } .about-REISS-SOMERS:hover > .reiss-ramka { visibility: visible; }

enter image description here

  • A simple solution is to make the 2nd block by the region size (meaning expanding the "frame of the region" around the content until the dimensions match the region 1. Well, make the same rule with the hover on block 2. - alexoander
  • one
    Already asked this question! Attach html for the future! Yet elementary, if at least read the basics of css! That would not disappear block with icons and hang on it: hover! + Start to finally check your styles for errors !!! .about-REISS-SOMERS:hover > .reiss-ramka, .reiss-ramka:hover { visibility: visible; } .about-REISS-SOMERS:hover > .reiss-ramka, .reiss-ramka:hover { visibility: visible; } - HamSter

1 answer 1

You can make a block in which you can place both elements (visible and invisible) and show the second one when you hover over it. By the way, this approach is at the same time semantically more correct, since it combines content by meaning.

 article { border: solid; } article:hover .secondary { display: block; } .main { background: green; height: 100px; } .secondary { background: ivory; height: 100px; display: none; } a { display: block; } 
  <article> <div class="main"> <img src="http://placekitten.com/400/100" /> </div> <div class="secondary"> <a href="#"> link </a> <a href="#"> link </a> <a href="#"> link </a> <a href="#"> link </a> </div> </article>