Partage
  • Partager sur Facebook
  • Partager sur Twitter

Hover qui pointe vers une cible qui n'est pas pare

JulienRodiet
    19 juillet 2019 à 16:26:15

    Bonjour tout le monde,

    Je n'ai pas réussis à faire une chose toute bête selon moi mais qui n'est peut-être pas possible.

    Je souhaiterai afficher une div au survol d'un bouton qui n'est pas parent à cette div.

    Est-ce que quelqu'un peu m'aider s'il vous plait ?

    Voici un exemple de code que je voudrais faire :

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
	<style type="text/css">
		.bouton{
			text-align: center;
			padding: 30px 0;
			background-color: #FF0000;
			width: 300px;
		}

		.autreboite{
			margin: 30px;
			text-align: center;
			padding: 30px 0;
			background-color: violet;
			width: 300px;
		}
		#popopdubouton1{
			margin: 30px;
			text-align: center;
			padding: 30px 0;
			display: none;
			background-color: blue;
			color: #FFFFFF;
			height: 200px;
		}
		.bouton:hover ?????? #popopdubouton1 {
			display: block;
		}
	</style>
	
</head>

<body>
	
	<div class="bouton">Voici mon bouton</div>
	<div class="autreboite">
		<h1>titre</h1>
		<div id="popopdubouton1"><p>Et la je fais apparêtre des trucs au survol de mon bouton</p></div>
	</div>
</body>
</html>



    -
    Edité par JulienRodiet 19 juillet 2019 à 16:28:08

    • Partager sur Facebook
    • Partager sur Twitter
    Spybot
      19 juillet 2019 à 16:49:20

      Pour sélectionner un élément voisin c'est le "+", le > permets de choisir un enfant

      Voici ton code corrigé : 

      <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
    <style type="text/css">
        .bouton{
            text-align: center;
            padding: 30px 0;
            background-color: #FF0000;
            width: 300px;
        }
 
        .autreboite{
            margin: 30px;
            text-align: center;
            padding: 30px 0;
            background-color: violet;
            width: 300px;
        }
        #popopdubouton1{
            margin: 30px;
            text-align: center;
            padding: 30px 0;
            display: none;
            background-color: blue;
            color: #FFFFFF;
            height: 200px;
            display: none; /* ICI ON met invisible le bloc */
        }
        .bouton:hover + .autreboite > #popopdubouton1 {
	    display:block; /* ICI On met en visible le bloc */
        }
    </style>
     
</head>
 
<body>
     
    <div class="bouton">Voici mon bouton</div>
    <div class="autreboite">
        <h1>titre</h1>
        <div id="popopdubouton1"><p>Et là, je fais apparAÎtre des trucs au survol de mon bouton</p></div>
    </div>
</body>
</html>



      • Partager sur Facebook
      • Partager sur Twitter
      JulienRodiet
        19 juillet 2019 à 17:12:24

        Ha cool ! Merci.

        Mais du coup j'ai pas réussi à le faire avec un mon code qui est un poil complex vue que le bouton est imbriqué très loin dans une div :

        Le bonton c'est la div avec la class "color1" et ce que je souhaiterai afficher c'est la div avec l'id "Rubrique1"

        .main--page{
    margin-bottom: 0;
    margin:0;
}

.Rond{
    text-align:center;
    padding:10px;
}
.Rond2{
    text-align:center;
    padding:0px;
}

h5{
    font-size:30px;
    font-weight:100;
    margin:50px 0 0;
    line-height:40px;
    color:#333333;
    text-align:center;
} 
.strat3 h5{
    font-size:30px;
    font-weight:100;
    margin:50px 0 0;
    line-height:40px;
    color:#FFFFFF;
    text-align:center;
} 

h3{
    font-size:12px;
    font-weight:800;
    margin:20px;
}

.color1{
    margin: 0 auto;
    background-color:#E6505A;
    background-image:url('/assets/theme_image/Logement.png');
    background-size: 70px; 
    background-repeat: no-repeat;
    background-position:50%;
    border-radius:50%;
    height:115px;
    width:115px;
    padding:47px 0 0 0;
    color: #FFFFFF;
}
.color2{
    margin:0 auto;
    background-color:#E60087;
    background-image:url('/assets/theme_image/Transition-sociale.png');
    background-size: 70px; 
    background-repeat: no-repeat;
    background-position:50%;
    border-radius:50%;
    height:115px;
    width:115px;
    padding:47px 0 0 0;
    color: #FFFFFF;
}
.color3{
    margin:0 auto;
    background-color:#8C2896;
    background-image:url('/assets/theme_image/Investir.png');
    background-size: 70px; 
    background-repeat: no-repeat;
    background-position:50%;
    border-radius:50%;
    height:115px;
    width:115px;
    padding:47px 0 0 0;
    color: #FFFFFF;
}
.color4{
    margin:0 auto;
    background-color:#1E46A0;
    background-image:url('/assets/theme_image/consignation.png');
    background-size: 70px; 
    background-repeat: no-repeat;
    background-position:50%;
    border-radius:50%;
    height:115px;
    width:115px;
    padding:47px 0 0 0;
    color: #FFFFFF;
}
.color5{
    margin:0 auto;
    background-color:#00AAFA;
    background-image:url('/assets/theme_image/acti-financiere.png');
    background-size: 70px; 
    background-repeat: no-repeat;
    background-position:50%;
    border-radius:50%;
    height:115px;
    width:115px;
    padding:47px 0 0 0;
    color: #FFFFFF;
}
.color6{
    margin:0 auto;
    background-color:#00AFAA;
    background-image:url('/assets/theme_image/Connaitre-CDC.png');
    background-size: 70px; 
    background-repeat: no-repeat;
    background-position:50%;
    border-radius:50%;
    height:115px;
    width:115px;
    padding:47px 0 0 0;
    color: #FFFFFF;
}


.color1:hover + #Rubrique1 {
    display: block;    
}

.strat1{
    background-color:#FFFFFF;
    padding:40px 0 10px 0;
}

#Rubrique1{
    display: none;
    background-color:#E6505A;
    color: #FFFFFF;
    padding:40px 0;
}
.strat3{
    background-color:#00AFAA;
}

.strat4{
    padding:60px 0;
}

.traitV{
    padding:0;
    margin:160px auto;
    width:1px;
    height: 100px;
    background-color:#333333;
}

.traitH{
    padding:0;
    margin:auto;
    width:100px;
    height: 1px;
    background-color:#333333;
}

.bloc{
    text-align:center;
    color:#333333;
    padding:30px 45px;
}

.bloc h5{
    font-size:30px;
    font-weight:100;
    margin:20px;
    line-height:40px;
    text-align:center;
} 

.megafluid{
    padding:0;
}
.pave-texte{
    padding:40px;
    text-align:center;
}

h2{
    text-align:center;
}
p{
    text-align:center;
}

.tuile{
    margin:40px auto;
    background-color:#FFFFFF;
    background-image:url('/assets/theme_image/Coin.png');
    background-size: 25px; 
    background-repeat: no-repeat;
    background-position: bottom left;
    max-width:300px;
}

.tuile img{
    width:100%;
}

.tuile h4{
    font-size: 17px;
    text-align:left;
    padding:10px 20px;
}
.tuile p{
    text-align:left;
    padding:5px 20px;
    
}
.tuile .lien{
    text-align:right;
}

#Rubrique2{
    display: none;
}

.btn {
  margin:15px;
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.5rem 3.5rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 1.5rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-primary {
  color: #fff;
  background-color: #00AFAA;
  border-color: #00AFBB;
}

.btn-primary:hover {
  color: #fff;
  background-color: #73c8aa;
  border-color: #73c8BB;
  text-decoration:none;
}

.d-none {
  display: none !important;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-block {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-block {
    display: block !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }
}

        <div class="container-fluid megafluid">
    <div class="row">
        <div class="col-md-12">
            <h5>Toutes nos Thématiques</h5>
        </div>
        <div class="col-md-1 d-none d-lg-block"></div>
        <div class="col-md-10 col-xs-6 strat1">
            <div class="col-md-2 col-sm-4 col-xs-12 Rond">
                <a href="https://opendata.caissedesdepots.fr/explore/?sort=modified&q=logements">
                    <div class="color1"></div> 
                    <h3>Logement</h3>
                </a>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-12 Rond">
                <a href="https://opendata.caissedesdepots.fr/explore/?sort=modified&q=sociale">
                    <div class="color2"></div>
                    <h3>Transition sociale</h3>
                </a>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-12 Rond">
                <a href="https://opendata.caissedesdepots.fr/explore/?sort=modified&q=Investissement">
                    <div class="color3"></div>
                    <h3>Investissement & Territoire</h3>
                </a>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-12 Rond">
                <a href="https://opendata.caissedesdepots.fr/explore/?sort=modified&q=D%C3%A9p%C3%B4ts">
                    <div class="color4"></div>
                    <h3>Dépôts & consignation</h3>
                </a>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-12 Rond">
                <a href="https://opendata.caissedesdepots.fr/explore/?sort=modified&q=Activit%C3%A9s">
                    <div class="color5"></div>
                    <h3>Activités financières</h3>
                </a>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-12 Rond">
                <a href="https://opendata.caissedesdepots.fr/explore/?sort=modified&q=Caisse+des+D%C3%A9p%C3%B4ts">
                    <div class="color6"></div>
                    <h3>Connaitre la CDC</h3>
                </a>
            </div>
        </div>
        <div class="col-md-1 d-none d-lg-block"></div>

            <div class="col-md-12 col-xs-6 strat2" id="Rubrique1">
                <div class="col-md-4 pave-texte">
                        <h3>kgfdjkjfds</h3>
                        <p>
                            kjgfdshlgkds kjfdshg kjfdshg jdsfg lkjds 
                            kh kjgfdshlgkds kjfdshg kjfdshg jdsfg lkjds khkjgfdshlgkds 
                            kjfdshg kjfdshg jdsfg lkjds khkjgfdshlgkds kjfdshg kjfdshg j
                            dsfg lkjds khkjgfdshlgkds kjfdshg kjfdshg jdsfg lkjds khkjgfdshlgk
                            ds kjfdshg kjfdshg jdsfg lkjds khkjgfdshlgkds kjfdshg kjfdshg j
                            dsfg lkjds kh
                        </p>
                        <a href="#" class="btn btn-primary">bouton</a>
                    </div>
                    <div class="col-md-4 pave-texte">
                        <h3>kgfdjkjfds</h3>
                        <p>
                            kjgfdshlgkds kjfdshg kjfdshg jdsfg lkjds 
                            kh kjgfdshlgkds kjfdshg kjfdshg jdsfg lkjds khkjgfdshlgkds 
                            kjfdshg kjfdshg jdsfg lkjds khkjgfdshlgkds kjfdshg kjfdshg j
                            dsfg lkjds khkjgfdshlgkds kjfdshg kjfdshg jdsfg lkjds khkjgfdshlgk
                            ds kjfdshg kjfdshg jdsfg lkjds khkjgfdshlgkds kjfdshg kjfdshg j
                            dsfg lkjds kh
                        </p>
                        <a href="#" class="btn btn-primary">bouton</a>
                    </div>
                    <div class="col-md-4 pave-texte">
                        <h3>kgfdjkjfds</h3>
                        <p>
                            kjgfdshlgkds kjfdshg kjfdshg jdsfg lkjds 
                            kh kjgfdshlgkds kjfdshg kjfdshg jdsfg lkjds khkjgfdshlgkds 
                            kjfdshg kjfdshg jdsfg lkjds khkjgfdshlgkds kjfdshg kjfdshg j
                            dsfg lkjds khkjgfdshlgkds kjfdshg kjfdshg jdsfg lkjds khkjgfdshlgk
                            ds kjfdshg kjfdshg jdsfg lkjds khkjgfdshlgkds kjfdshg kjfdshg j
                            dsfg lkjds kh
                        </p>
                        <a href="#" class="btn btn-primary">bouton</a>
                    </div>
            </div>
        </div> 

</div>
<div class="container-fluid megafluid strat3">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
            <h5>Visualisez</h5>
        </div>
            <div class="col-md-4">
                <div class="tuile">
                    <img src="/assets/theme_image/visualise1.png" alt="">
                    <h4>
                        Nos logements sociaux 
                    </h4>
                    <p>
                        Vous trouverez dans ce jeu de donnée toutes les informations concernant les loggements sociaux construit par la Caisse des Dépôts
                    </p>
                    <p class="lien">
                        <a href="https://opendata.caissedesdepots.fr/pages/test/">Lien ></a>
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="tuile">
                    <img src="/assets/theme_image/visualise2.png" alt="">
                    <h4>
                        Nos effectifs  
                    </h4>
                    <p>
                         Vous trouverez dans ce jeu de donnée toutes les informations sur nos effectifs depuis 2010, selon le sexe, le statut, les fonctions, le 
                    </p>
                    <p class="lien">
                        <a href="https://opendata.caissedesdepots.fr/pages/test/">Lien ></a>
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="tuile">
                    <img src="/assets/theme_image/visualise3.png" alt="">
                    <h4>
                        Nos directions régionales 
                    </h4>
                    <p>
                        Vous trouverez dans ce jeu de donnée toutes les informations sur nos dirrections régionales, leur localité, leur dirrecteur et leur contact
                    </p>
                    <p class="lien">
                        <a href="https://opendata.caissedesdepots.fr/pages/test/">Lien ></a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid megafluid">
    <div class="row strat4">
        <div class="col-md-5 col-md-offset-1 bloc">
            <h5>Outils<br /><br /></h5>
            <p>
                <a href="https://opendata.caissedesdepots.fr/map/+0c8aca9ad2014d38/edit/">Créez des cartes</a><br />
                <a href="https://opendata.caissedesdepots.fr/chart/?dataChart=eyJ0aW1lc2NhbGUiOiIiLCJxdWVyaWVzIjpbXSwiYWxpZ25Nb250aCI6dHJ1ZSwiZGlzcGxheUxlZ2VuZCI6dHJ1ZX0%3D">Créez des graphiques</a><br />
                <a href="https://opendata.caissedesdepots.fr/api/v1/console/datasets/1.0/search/">Utilisez l’API</a><br />
                <a href="https://opendata.caissedesdepots.fr/page/demarche_externe/">Accédez à la documentation</a>
            </p>
        </div>
        <div class="col-md-1 d-none d-lg-block traitV"></div>
        <div class="col-md-1 d-lg-none traitH"></div>
            <ods-catalog-context context="catalog" ods-domain-statistics>
                <ods-dataset-context context="platform" platform-source="monitoring" platform-dataset="ods-datasets-monitoring">
                    <div class="col-md-5 bloc">
                            <h5 class="ods-page__dataset-of-dataset__section-title" translate>Most popular data</h5>
                            <ods-most-popular-datasets context="catalog" style="text-align:left;"></ods-most-popular-datasets>
                        <a href="#" class="btn btn-primary">En voir Plus</a>
                    </div>
                </ods-dataset-context>
        </ods-catalog-context>
    </div>
</div>
        • Partager sur Facebook
        • Partager sur Twitter
        Spybot
          19 juillet 2019 à 17:13:43

          Dans ce cas, je pencherai pour faire ça par Javascript. Au moins, tu ne t'embêtes pas avec la hiérarchie des éléments html puisque tu utiliserais juste l'id de ton élément à afficher.
          • Partager sur Facebook
          • Partager sur Twitter
          JulienRodiet
            20 juillet 2019 à 12:26:35

            ok mais du coup ça donnerais quoi en js ?

            parceque je connais un peux jquery mais je n'en fais pas souvent.

            • Partager sur Facebook
            • Partager sur Twitter
            AliasDmc
            • HTML / CSS
              20 juillet 2019 à 14:18:09

              Bonjour JulienRodiet ,

              Un exemple possible :

              https://codepen.io/Zonecss/pen/oKgVgz

              Une autre piste 100% css :target

               https://codepen.io/Zonecss/pen/NVWNYZ

              • Partager sur Facebook
              • Partager sur Twitter
              Découvrez les Css avec la zonecss.fr
              JulienRodiet
                23 juillet 2019 à 10:44:10

                Merci beaucoup ça m'a énormément aidé, pas facile de bien comprendre comment les utiliser mais ça fonctionne. 

                J'ai utiliser la pseudo class target.

                Merci encore pour votre aide

                • Partager sur Facebook
                • Partager sur Twitter

                Hover qui pointe vers une cible qui n'est pas pare

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                • Editeur ●
                • Markdown