Cień po najechaniu na obrazek w ramce

Question

Siemka, potrzebuje pomocy. Po najechaniu myszką na obrazek w iframe ma pojawiać się cień i to mam załatwione, ale problem jest taki, że nawet jak ramka jest pusta to po najechaniu na nią się ten cień pojawia. Jak sprawdzić czy ramka ma zawartość i dopiero wtedy wyświetlić cień? Wymagania jakie mam to użycie tylko HTML i CSS bez JS.

Próbowałem tak, ale nie działa:

.bigimage iframe:hover + .bigimage iframe:target{
    box-shadow: 10px 10px 10px rgb(55, 55, 55);
}

bigimage to classa diva w którym jest iframe

<div class="bigimage">
        <iframe src="about:blank" name='content' class="test"></iframe>
    </div>

 

Answer 1

Nie da się ostylować wnętrza iframe przy pomocy CSS z zewnątrz, ponieważ jest to osobny dokument. Jeśli już tworzysz iframe z jakąkolwiek treścią, to możesz skorzystać z atrybutu srcdoc, żeby inline-owo wstawić tam HTML razem z CSS. Ewentualnie, jeśli iframe będzie w tej samej domenie, możesz JS-em dostać się do środka przy pomocy contentDocument i wtedy manipulować stylami.

Answer 2

To może taki trick

[ on-line ]

<div class="bigimage">
  <iframe src="about:blank" name="content" class="test"></iframe>
</div>

<div class="bigimage">
  <iframe src="" name="content" class="test"></iframe>
</div>

<div class="bigimage">
  <iframe src="https://picsum.photos/150/200?random=1" 
          name="content" class="test"></iframe>
</div>

.bigimage iframe:not([src="about:blank"], [src=""]):hover {
  box-shadow: 10px 10px 10px rgb(55, 55, 55);
}

 

 

 

BTW, przyjrzyj się dokładnie co robi selector + (plus)

div + p
Wybiera pierwszy element <p>, który jest umieszczony bezpośrednio po elementach <div>

[ on-line ]

.bigimage:hover + .bigimage iframe {
  box-shadow: 10px 10px 10px red;
}
.bigimage iframe:hover + .bigimage iframe {
  box-shadow: 10px 10px 10px green;
}

 

 

P.S. [ on-line 1 ]  [ on-line 2 ]  [ on-line 3 ]  - mam nadzieję, że będą inspiracją do dalszych eksperymentów nad wyglądem takiej galerii.