Bonsoir,

J'ai créé une page où dans le main j'ai 2 sections, qui contiennent chacune 2 articles ayant un lien <a>. Bon jusqu'à la c'est à peu près clair

Afin de donner un petit effet, j'essaie d'affecter à mon a un hover pour le lever de 10 ou 20 pixel mais j'ai un soucis... C'est que cela ne fonctionne pas.

Plus concrètement, cela ne fonctionne pas quand je l'affecte à la balise a mais elle fonctionne sur la balise article, du coup quand je passe sur l'article (donc pas tout le temps sur le bouton ça s'active).

Avez vous une idée de la raison pour laquelle cela ne s'affecte pas ?

Je tiens à préciser qu'une changement de couleur, taille de police c'est bon, c'est juste pour le lever :/

Voici une partie du code ( simplifié sans le header et tout) 

HTML:

	<main>
			<section><article><a href="Individu.html" class="bouton">Organique</a></article><article><a href="Individu.html" class="bouton">Molécule</a></article></section>
			<section><article><a href="Individu.html" class="bouton">Montagne</a></article><article><a href="Individu.html" class="bouton">Sport et santé</a></article></section>
		</main>

et Css:

section {margin-bottom: 10em;}

article{	width:50%;
				text-align:center;
				display: inline-block;
			}

		
article > .bouton {	padding: 4em 4em 4em 4em;
								background-color: #b7e34e;
								border-radius: 5px;
							} 
						
.bouton:hover {	transform:translate(50px, 100px);
							transition: 0.4s;
			
						} 

Merci d'avance de votre aide

-
Edité par Alexandreboudon 16 décembre 2018 à 21:52:17

Il faut que ton bouton soit de type block ou inline-block. 

https://developer.mozilla.org/fr/docs/Web/CSS/transform

Zoki_Marciano a écrit:

Il faut que ton bouton soit de type block ou inline-block. 

https://developer.mozilla.org/fr/docs/Web/CSS/transform

Désolé pour le temps de réponse

Merci, je ne l'avais affecté qu'à article mais ça m'a permit de me débloquer (et de refaire au passage mon code)

Du coup, sujet résolu