Légende hover sur un iframe player vimeo ne fonctionne pas

Légende hover sur un iframe player vimeo ne fonctionne pas - HTML/CSS - Programmation

Marsh Posté le 09-07-2019 à 09:11:28    

Hello !
c'est vraiment une question bête que je viens poser mais je n'arrive pas à m'en sortir avec ça :
J'ai une page avec des images, quand on passe la souris dessus la légende apparait en dessous. Je n'arrive pas à reproduire ce système sur une vidéo vimeo mais je ne comprend pas pourquoi :
 
https://codepen.io/marie-fran-oise-talbot/pen/XLyOpG
 
La légende 1 est correctement placée, (elle apparait sous l'image quand hover) mais la légende 2 sur la vidéo c'est n'imorte quoi. J'ai essayé de tourner le truck dans tous les sens ça fonctionne pas et google ne m'aide pas du tout....
Des idées ? Merci !

Reply

Marsh Posté le 09-07-2019 à 09:11:28   

Reply

Marsh Posté le 09-07-2019 à 09:41:44    

Salut,
 
Là c'est du grand n'importe quoi...
Balises mal fermées (span, div), balises non existantes (block ?), balise mal imbriquée (pas de div dans un p) et enfin css non cohérent (tu demandes d'afficher ta légende quand on survole une image placée dans un paragraphe de classe "image", une image n'est pas un iframe ni même une vidéo).
 
Essaye de faire les choses dans le bon ordre parce que là ça relèverait plus du miracle si ça fonctionnait.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 09-07-2019 à 09:59:32    

J'ai employé le tag figure, cela me semblait plus approprié.
Et aucun problème
https://codepen.io/anon/pen/dBQrdJ?editors=1100#0

Reply

Marsh Posté le 09-07-2019 à 10:12:34    

https://codepen.io/anon/pen/MMzRVE

Code :
  1. .video-conteneur span { visibility:hidden ; position: absolute; bottom: -18px; right: 0%; }
  2. .video-conteneur iframe:hover + span { visibility: visible;  }


EDIT: [:benou_grilled]


Message édité par mechkurt le 09-07-2019 à 10:12:56

---------------
D3
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed