Hello to all! I’m learning CSS and I’m unable to make the closing button (.close) appear when opening a modal window ... For some reason, display: block does not work with focus, although everything seems to be simple and should work without problems ...

.galery_img_pushkin{ float:left; margin:100px 0 0 230px; } .galery_img_pushkin a{ display:block; cursor:zoom-in; } .galery_img_pushkin a:focus{ position:fixed; top:0; right:0; bottom:0; left:0; height:170px; width:300px;margin:auto; border: 12px solid rgba(255,255,255,1.0); border-radius:10px; cursor:default; box-shadow: 0 0 20px rgba(30,30,30, 1.0), 0 0 0 1000px rgba(130,130,130,.5); z-index:2; } .close{ display:none; background:rgba(172,205,0,1.00); height:55px; width:55px; position:absolute; top:70px; left:560px; z-index:3; text-align:center; font-size:40px; color:#fff; } .galery_img_pushkin a:focus .close{ display:block; } .close:hover{ background:rgba(245,140,0,1.00); cursor:pointer; } .pushkin_01{ background:rgba(100,130,130,.5); height:100px; width:200px } 
 <div class="galery_img_pushkin"> <div class="close">x</div> <a href="#" class="pushkin_01"></a> </div>

  • It is impossible to address from descendants to the parent. it is impossible - Alexey Shimansky
  • Clearly, it means it does not work ... but how can you say this topic? where I teach, I read nothing about it (... - Mike
  • I do not know how the topic is called .... the point is that you can only go deep into the родитель > потомок > потомок > потомок , and not vice versa. that is, a потомок > родитель > родитель through CSS is impossible. Therefore, any construction of the form .galery_img_pushkin a.pushkin_01:hover .close will give nothing and is useless ..... If you need to change the state of the parent depending on the state of the child, then js is likely needed ....... your case if you just need a dependence on the focus over a - then on css it’s wrong ... if you take as dependence on .galery_img_pushkin:hover - then you can - Alexei Shimansky
  • I see, thanks. - Mike

1 answer 1

.galery_img_pushkin a: focus .close replace with .galery_img_pushkin: hover .close

  • I didn’t think of getting this effect, but thanks, now it’s even clearer why it didn’t work ... - Mike