Sujet Précédent Sujet Suivant

Hover: placement souris mauvais

Fermé
Djey - 17 mai 2014 à 19:00
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 27 mai 2014 à 04:21
Salutations,
Pour un travail de conception web, nous devons faire un CV. Ayant déjà un peu d'expérience je teste de faire une mise en page un peu originale mais j'ai un soucis avec un de mes hover.

L'idée est d'avoir des cercles qui se transforme en rectangle au passage de la souris pour afficher une image contenant les infos.
Pour ce faire j'utilise du CSS avec un hover. Le "content" ne permettant pas, à ma connaissance, de faire de la mise en page, je me suis rabattu sur une image *.png.
Sans image, avec un simple texte, tout va bien.
Avec image, le système fonctionne toujours mais le hover "saute" lorsque ma souris arrive au niveau de la taille de l'image. Du coup, le rond ne s'ouvre pas tant que je ne vais pas clairement dessus mais se met à faire n'importe quoi en bloquant le passage de la souris sur le rond d'à coté.
(sur firefox. avec IE le rond s'ouvre lors du passage de la souris sur la position finale de l'image)

Mon code: 
<!DOCTYPE html>
<html>
<head>

  <meta content="text/html; charset=utf-8" http-equiv="content-type">
  <title>Jérémy, presentation website</title>

<link rel="shortcut icon" href="images/icone.jpg" type="image/x-icon"/>

<link rel="stylesheet" type="text/css" href="css/style.css"/>


</head>

<body>
<div id="etudes"><h1>Etudes</h1></div >

<div id="experiences"><h1>XP Pro</h1> <br/></div >

<div id="langues"><h1>Langues</h1> <br/></div>

<div id="competences"><h1>Skills</h1> <br/></div>

<div id="interets"><h1>Interets</h1> <br/></div>
</body>
</html>


body {
  text-align:center;
}

h1 {
	font-size: 3em; 
	font-family: helvetica, arial, sans-serif; 
	font-variant: small-caps; 
	color:#888;
	text-align: center;
	z-index: 1000;
	padding-top: 0.7em;
	}

#etudes {
	width: 200px; height: 200px;
	margin: 3em 3em 3em 3em;
	background: #fff;
	border: 20px solid #aaa;
	border-radius: 200px;
	transition: border-radius 2s, border-color 3s; 
	position:absolute;
	float: left;
	z-index: 5;
	}
#etudes:hover {
	width: 500px; height: 500px;
	border-color: #333;
	transform: rotate(1080deg);
	border-radius: 30px;
	transition: all 1.5s; 
}


#etudes:after { 
	content: url(etudes.png);
	position:absolute; 
	top: 5px; 
	left:-14px; 
	font-size: 1.25em; 
	font-family: helvetica, arial, sans-serif; 
	font-variant: small-caps; 
	color:#888;
	opacity:0; 
	transition: opacity 2s;
	padding-top: 7em;
	padding-left: 0.8em;

}
#etudes:hover:after {
	opacity: 1;
	transition: opacity 1s 1s;
}







#experiences {
	width: 200px; height: 200px;
	left:260px;
	margin: 3em 3em 3em 3em ;
	background: #fff;
	border: 20px solid #aaa;
	border-radius: 300px;
	position:absolute;
	float: left;
	z-index: 4;
}
#experiences:hover {
	width: 500px; height: 500px;
	border-color: #333;
	transform: rotate(1080deg);
	border-radius: 30px;
	transition: all 1.5s;
}


#experiences:after { 
	content: url(etudes.png) ;
	position:absolute; 
	top: 5px; 
	left:-14px; 
	font-size: 1.25em; 
	font-family: helvetica, arial, sans-serif; 
	font-variant: small-caps; 
	color:#888;
	opacity:0; 
	transition: opacity 2s;
	
}
#experiences:hover:after {
	opacity: 1;
	transition: opacity 1s 1s;
}











#langues {
	width: 200px; height: 200px;
	left:510px;
	margin: 3em 3em 3em 3em ;
	background: #fff;
	border: 20px solid #aaa;
	border-radius: 300px;
	position:absolute;
	float: left;
	z-index: 3;
}
#langues:hover {
	width: 500px; height: 500px;
	border-color: #333;
	transform: rotate(1080deg);
	border-radius: 30px;
	transition: all 1.5s; 
}


#langues:after { 
	content: "blablablablak fioihyfoiuqsf  zoeifyhuoisdfh qoiefdyhuiofh oiuhyfr o hyfiuzqyfgh YUIYHFGOIUEQD OHKJ HUHGQIUI UIUy iuoyhoi yholsyfuiygfyhl";
	position:absolute; 
	top: 5px; 
	left:-14px; 
	font-size: 1.25em; 
	font-family: helvetica, arial, sans-serif; 
	font-variant: small-caps; 
	color:#888;
	opacity:0; 
	transition: opacity 2s;
	
}
#langues:hover:after {
	opacity: 1;
	transition: opacity 1s 1s;
}












#competences {
	width: 200px; height: 200px;
	left:760px;
	margin: 3em 3em 3em 3em ;
	background: #fff;
	border: 20px solid #aaa;
	border-radius: 300px;
	position:absolute;
	float: left;
	z-index: 2;
}
#competences:hover {
	width: 500px; height: 500px;
	border-color: #333;
	transform: rotate(1080deg);
	border-radius: 30px;
	transition: all 1.5s; 
}


#competences:after { 
	content: "blablablablak fioihyfoiuqsf  zoeifyhuoisdfh qoiefdyhuiofh oiuhyfr o hyfiuzqyfgh YUIYHFGOIUEQD OHKJ HUHGQIUI UIUy iuoyhoi yholsyfuiygfyhl";
	position:absolute; 
	top: 5px; 
	left:-14px; 
	font-size: 1.25em; 
	font-family: helvetica, arial, sans-serif; 
	font-variant: small-caps; 
	color:#888;
	opacity:0; 
	transition: opacity 2s;
	
}
#competences:hover:after {
	opacity: 1;
	transition: opacity 1s 1s;
}










#interets {
	width: 200px; height: 200px;
	left:1010px;
	margin: 3em 3em 3em 3em ;
	background: #fff;
	border: 20px solid #aaa;
	border-radius: 300px;
	position:absolute;
	float: left;
	z-index: 1;
}
#interets:hover {
	width: 500px; height: 500px;
	border-color: #333;
	transform: rotate(1080deg);
	border-radius: 30px;
	transition: all 1.5s;
}


#interets:after { 
	content: "blablablablak fioihyfoiuqsf  zoeifyhuoisdfh qoiefdyhuiofh oiuhyfr o hyfiuzqyfgh YUIYHFGOIUEQD OHKJ HUHGQIUI UIUy iuoyhoi yholsyfuiygfyhl";
	position:absolute; 
	top: 5px; 
	left:-14px; 
	font-size: 1.25em; 
	font-family: helvetica, arial, sans-serif; 
	font-variant: small-caps; 
	color:#888;
	opacity:0; 
	transition: opacity 2s;
	
}
#interets:hover:after {
	opacity: 1;
	transition: opacity 1s 1s;
}



Merci d'avance.
Que la force soit avec vous =D


1 réponse

Réponse 1 / 1
curumo_leblanc Messages postés 266 Date d'inscription samedi 10 septembre 2011 Statut Membre Dernière intervention 7 juillet 2014 74
26 mai 2014 à 19:26
Bonsoir,

personnellement je suis surpris de voir que la dimension de ton hover est différente de ton non hover...

Forcément lorsque tu passes au dessus ton div se décale vers la droite et tu "sors" du cadre hover par défaut ce qui donne ton "flashouillage"

Mets une largeur équivalente serait déjà un plus. Mais je t'invite surtout à mettre un display:block; qui permettra au moins lors du décalage d'être toujours considéré comme étant sur le div malgré la transition, ce qui devrait palier à ce problème (non testé)
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
27 mai 2014 à 04:21
bizarre également de mettre un un border radius supérieur au width
un border radius qui te donne un cercle est en général la moitié du width / height
tu pourrais meme mettre border-radius:3000px; ce ne depassera jamais la moitié du div.

un rotate de 1080deg me semble aussi bizarre en général 380deg te fait retourner a l'initial donc mettre 1080 ne sert a rien.
si tu veux en faire une animation (plusieurs tours sur une durée) utilise @keyframes
0

Discussions similaires

Remplacer un hover(CSS) par un click(JS)
Noemie -
Pitet -

1 réponse
CSS: Hover d'un div
Chabanus -
YoussefBehi -

8 réponses
HTML - CSS display et :hover
titouflout -
Olivier -

10 réponses
hover visuel sur image map
indiana-81 -
armoire40 -

8 réponses
[JS] Simuler un hover sur <span>
josh -
optyler -

9 réponses