28172 sujets

CSS et mise en forme, CSS3

Application de style on hover d'un autre élément

Bonjour,
Je cherche à appliquer une animation de soulignement sur un élément de menu.
Pour chaque élément de menu on a un <span> contenu dans un <a> contenu dans un <li>.
Le <a> a un margin qui permet de cliquer sur une zone plus large que le seul texte, mais du coup quand je lui applique l'animation, le soulignement déborde (margin oblige...).
Je voudrais donc qu'au survol de <a> ce soit l'élément <span> qui soit souligné.
Pour cela, j'ai lu qu'il fallait utiliser le sélecteur CSS ">", mais je ne comprends pas comment faire.

Voici le code original :
.ubermenu-item.ubermenu-item-level-0 {
	display: inline-block;
	position: relative;
	padding-bottom: 2px;
}
.ubermenu-item.ubermenu-item-level-0:after {
	content: '';
	display: block;
	margin: auto;
margin-top:-10px;
	height: 2px;
	width: 0px;
	background: transparent;
	transition: width 1s ease, background-color 1s ease;
}
.ubermenu-item.ubermenu-item-level-0:hover:after {
	width: 100%;
	background: #C41D23;
}


Et voici le code que j'ai essayé sans succès :
.ubermenu-item.ubermenu-item-level-0 {
	display: inline-block;
	position: relative;
	padding-bottom: 2px;
}
.ubermenu-item.ubermenu-item-level-0:after {
	content: '';
	display: block;
	margin: auto;
margin-top:-10px;
	height: 2px;
	width: 0px;
	background: transparent;
	transition: width 1s ease, background-color 1s ease;
}
.ubermenu-item.ubermenu-item-level-0:hover:after {
	width: 100%;
	background: #C41D23;
}


Merci d'avance à l'aide que vous pourrez m'apporter.
Cordialement,
.ubermenu-item.ubermenu-item-level-0 > span {
	display: inline-block;
	position: relative;
	padding-bottom: 2px;
}
.ubermenu-item.ubermenu-item-level-0:after > span {
	content: '';
	display: block;
	margin: auto;
margin-top:-10px;
	height: 2px;
	width: 0px;
	background: transparent;
	transition: width 1s ease, background-color 1s ease;
}
.ubermenu-item.ubermenu-item-level-0:hover:after > span {
	width: 100%;
	background: #C41D23;
}
Ah oui en effet c'est autrement plus propre ! Merci bien !
Par contre du coup je ne comprends pas pourquoi la troisième animation ne semble pas réagir comme les autres ? Elle part de la gauche au lieu de partir du milieu... !
J'aimerais aussi pouvoir déplacer le soulignement de quelques pixels en dessous du texte, est-ce possible avec l'élément background-position ou quelque chose comme ça ?
http://codepen.io/anon/pen/emRGJW
Merci !
Romanceor a écrit :
Ah oui en effet c'est autrement plus propre ! Merci bien !
Par contre du coup je ne comprends pas pourquoi la troisième animation ne semble pas réagir comme les autres ? Elle part de la gauche au lieu de partir du milieu... !
J'aimerais aussi pouvoir déplacer le soulignement de quelques pixels en dessous du texte, est-ce possible avec l'élément background-position ou quelque chose comme ça ?
http://codepen.io/anon/pen/emRGJW
Merci !


Je dirais simplement qu'a partir d'un exemple simplifié qui fonctionne, tu devrais aisément trouvé moyen de modifier 2 ou 3 petites choses en l'analysant.

Pistes:
- padding
- pseudo-element
- autres auxquelles je ne pense pas forcement en premier lieu
Modifié par gc-nomade (24 Jan 2015 - 23:10)
Ah merci pour ces pistes, padding: 5px; et la suppression du pseudo-élément ont fonctionné du premier coup !
Merci !
Sujet clos
Aller à