Discussion :

[Matai_]

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 !

[Invité]

Bonjour,

1- déjà, ton code HTML est complètement foireux !

• on ne met pas de <div> dans un <p>
• <div> n'est pas fermé
• les balises <span> est <block> sont fermés à l'envers,
• où a tu été pêcher cette balise <block> ??

Donc : commence par avoir un code HTML VALIDE.


2- une <iframe>, c'est comme une "fenêtre sur l'extérieur".
Tu n'es plus sur TON site, mais sur une page "externe".
La preuve en est qu'il y a plein de bouton qu'on peut cliquer sur la vidéo (alors que tu ne les a pas codés !).

Par contre, rien n'empêche d'avoir le :hover sur la <div> conteneur de l'<iframe>.
Je corrige :

• on PEUT mettre le :hover sur la balise <iframe>
• mais PAS sur un élément contenu dans cet <iframe>

3- Pour les conteneurs (d'images, médias,...) et légendes, intéresse-toi plutôt à :

• <figure>
• <figcaption>

Exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
  <figure class="image">
    <img src="https://wamiz.com/uploads/images/maine-coon-cat-photography-robert-sijka-17-57ad8ed924355__880.jpg" />
    <figcaption>légende 1 : kittycat</figcaption>
  </figure>
 
  <figure class="video">
    <iframe src="https://player.vimeo.com/video/28164488" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    <figcaption>légende 2 : cat with a ball</figcaption>
  </figure>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
/* images */
figure.image { position: relative; }
figure.image img { width:100%; }
figure.image figcaption { visibility:hidden ; }
figure.image img:hover + figcaption { visibility: visible;  }
/* videos */
figure.video { position:relative; }
figure.video iframe { width:100%; }
figure.video figcaption { visibility:hidden; }
figure.video iframe:hover + figcaption { visibility: visible; }
/* legendes */
figure.image figcaption, figure.video figcaption { text-align:center; font-family: helvetica, sans-serif; font-style: bold; color:yellow; }

[NoSmoking]

Bonjour,

1- déjà, ton code HTML est complètement foireux :

c'est le moindre que l'on puisse dire

Par contre, rien n'empêche d'avoir le :hover sur la <div> conteneur de l'<iframe>.

L'<iframe> est un élément de la page et à ce titre peut recevoir le :hover

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
iframe:hover {
  border: 10px solid red;
}

[Invité]

@Nosmoking
C'est juste, mea culpa (je me suis laissé abusé par le titre...).

J'ai donc corrigé mon message précédent :

• on PEUT mettre le :hover sur la balise <iframe>
• mais PAS sur un élément contenu dans cet <iframe>

Ca vaut ce que ça vaut comme "excuse"...

[Matai_]

Merci pour vos réponses, le code c'est le bazar parce que je commence à avoir beaucoup de contenu et j'ai jamais eu autant de ligne à gérer ça me rend un peu confuse, surtout qu'à force d'y toucher et de chercher ça devient le n'importe quoi.
Bref j'ai suivi vos conseils, vous allez vraiment me prendre pour une naze (ça fait vraiment depuis que vous m'avez envoyé vos messages que je suis sur le coup...) je n'arrive pas à conjuguer le hover et le conteneur, j'ai bien suivi vos conseils mais je ne comprend pas pourquoi ça ne marche pas.
Pour vous c'est vraiment ridicule de galerer pour si peu mais de mon coté c'est 5h de prise de tête pour une vieille légende toute nulle

https://codepen.io/marie-fran-oise-talbot/pen/ZdVOZp
(j'ai un peu cleaner)

[Invité]

Tu n'as pas copié tel quel le code HTML que j'ai donné...
C'est pourtant le plus facile...

[Matai_]

si je l'ai recopié exactement tel quel mais j'ai été obligé de le modifier pour qu'il rentre dans le contexte du site et de rajouter les vidéos containers je peux pas faire autrement

edit 1 : Enfait sur le site il y a une mise en page globale puis une div qui contient une div qui contient la frame qui contient la vidéo et j'arrive pas trop à gérer la facon dont tel ou tel agit sur l'autre d'ailleurs ça me fait me poser la question sur les gros sites comment les webdevelopper font pour s'y retrouver entre toutes ces divs qui sont dépendantes les unes de autres c'est un cauchemard !!

edit 2 : bon en même temps ça fait 2 semaines que je fais ça H24 alors que je suis une noob je crois que je commence à plus trop y voir clair

[NoSmoking]

ça me fait me poser la question sur les gros sites comment les webdevelopper font pour s'y retrouver entre toutes ces divs qui sont dépendantes les unes de autres c'est un cauchemard

Certains ne s'y retrouve tout simplement pas

Ton premier exemple fonctionne au survol mais ton second ne présente pas la même structure HTML ce qui entraine que les sélecteurs ne s'applique pas de la même façon.

Je reprends ton code HTML pour que tu t'en rendes bien compte :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="background">
    <div class="txt2">
        <figure class="video">
            <iframe src="https://player.vimeo.com/video/28164488"></iframe>
            <figcaption>légende 1</figcaption>
        </figure>
 
        <figure class="video">
            <div class="video-conteneur">
                <iframe src="https://player.vimeo.com/video/28164488"></iframe>
            </div>
            <figcaption>légende 2</figcaption>
        </figure>
    </div>
    <br><br>
</div>
</div>

Pour le deuxième élément <figure> le sélecteur suivant ne s'applique pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
figure.video iframe:hover + figcaption {
    visibility: visible;
}

<figcaption> n'est pas frère de <iframe>