2
votes

Empêcher un effet de survol qui se déclenche à partir du mauvais élément

Le bouton .dropbtn a un style qui lui est attaché de sorte que lorsqu'il est survolé, il affiche le div .dropdown-content en ajoutant de l'opacité à cet élément. Cependant, le survol de l'endroit sous le bouton où apparaît le contenu .dropdown semble déclencher le survol qui ne devrait se produire que lorsque je survole .dropbtn. Pourquoi cela arrive-t-il?

Il existe des "solutions" comme l'ajout de débordement: caché dans le .dropdown et l'ajout de nouveau avec le survol, mais cela affecte la transformation que j'ai attachée au .dropdown-content. L'ajout de display: none et display: block au contenu .dropdown annule également l'effet de transformation souhaité.

<body>
  <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
</body>

* {
	font-family:sans-serif;
}
body {
	background-image:linear-gradient(to right,#42b4ce,#fd3838);
}
.dropbtn {
  background:none;
  color: white;
  font-size: 16px;
  border: none;
  cursor:pointer;
  padding:0 0 10px;
}

.dropdown {
  position: relative;
  width: 160px;
  margin: 0 auto;
  display: block;
  
}

.dropdown-content {
  opacity:0;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 400px;
  right:-80px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: -1;
  transform-origin: top center;
  transform:rotate3d(-40, 4, 1.5, 45deg);
  transition:.2s;
  border-radius:10px;
}

.dropdown-content a {
  color: black;
  padding: 10px 14px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {color: purple;}

.dropdown:hover .dropdown-content {
	opacity:1;
	transform:rotate3d(0, 0, 0, 40deg);
	z-index:0;
}

.dropdown:hover .dropbtn {text-shadow:1px 1px 2px rgba(0,0,0,0.6)};

html css hover

0 commentaires

3 Réponses :

0
votes

Une idée est simplement d'augmenter la hauteur du corps pour que l'élément passe derrière lui car il a un z-index

<body>
  <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
</body>

* {
	font-family:sans-serif;
}
body {
	background-image:linear-gradient(to right,#42b4ce,#fd3838);
  margin:0;
  height:100vh;
}
.dropbtn {
  background:none;
  color: white;
  font-size: 16px;
  border: none;
  cursor:pointer;
  padding:10px;
}

.dropdown {
  position: relative;
  width: 160px;
  margin: 0 auto;
  display: block;
  
}

.dropdown-content {
  opacity:0;
  position: absolute;
  z-index:-1;
  background-color: #f1f1f1;
  min-width: 400px;
  right:-80px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  transform-origin: top center;
  transform:rotate3d(-40, 4, 1.5, 45deg);
  transition:.2s;
  border-radius:10px;
}

.dropdown-content a {
  color: black;
  padding: 10px 14px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {color: purple;}

.dropdown:hover .dropdown-content {
	opacity:1;
	transform:rotate3d(0, 0, 0, 40deg);
	z-index:0;
}

.dropdown:hover .dropbtn {text-shadow:1px 1px 2px rgba(0,0,0,0.6)};

Voici une question connexe pour comprendre comment cette astuce fonctionne: z-index comportement étrange?

Et pour comprendre pourquoi votre dégradé couvrait tout l'écran même s'il n'y a pas de hauteur définie sur le corps, vous pouvez vérifier ceci: Comment supprimer les rayures qui apparaissent lors de l'utilisation de la propriété de dégradé linéaire?

0 commentaires

1
votes

Ajoutez visibilité: hidden; à la classe .dropdown-content et visibilité: visible à celle-ci lorsque .dropdown code> est survolé. Voir le code ci-dessous.

 

<body>
  <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
</body>
* {
	font-family:sans-serif;
}
body {
	background-image:linear-gradient(to right,#42b4ce,#fd3838);
}
.dropbtn {
  background:none;
  color: white;
  font-size: 16px;
  border: none;
  cursor:pointer;
  padding:0 0 10px;
}

.dropdown {
  position: relative;
  width: 160px;
  margin: 0 auto;
  display: block;
  
}

.dropdown-content {
  opacity:0;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 400px;
  right:-80px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: -1;
  transform-origin: top center;
  transform:rotate3d(-40, 4, 1.5, 45deg);
  transition:.2s;
  border-radius:10px;
  visibility: hidden;
}

.dropdown-content a {
  color: black;
  padding: 10px 14px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {color: purple;}

.dropdown:hover .dropdown-content {
	opacity:1;
	transform:rotate3d(0, 0, 0, 40deg);
	z-index:0;
    visibility: visible;
}

.dropdown:hover .dropbtn {text-shadow:1px 1px 2px rgba(0,0,0,0.6)};

0 commentaires

0
votes

Ajoutez simplement pointer-events: none; pour .dropdown-content et pointer-events: auto pour le sélecteur .dropdown : hover .dropdown-content

Démo

0 commentaires