28172 sujets

CSS et mise en forme, CSS3

Couleur+ animation jquery

bonjour,
je suis nouveau sur ce site Smiley biggrin

voici mon code :

<body>
	<div id="div_principale">
		<div id="solo" class="categorie">
			<div class="sous_menu">mmmmm</div>
			<div class="cache">SEUL</div>
			
		</div>

		<div id="duo" class="categorie">
			<div class="cache">DUO</div>
			<div class="sous_menu">mmmmm</div>
		</div>

		<div id="multi" class="categorie">
			<div class="cache">MULTI</div>
			<div class="sous_menu">mmmmm</div>
			
		</div>

		<div id="ajouter" class="categorie">
			<div class="sous_menu">mmmmm</div>
			<div class="cache">Ajouter un mot</div>
		</div>

	</div>
</body>




body
{
	margin: 0px;
	padding: 0px;
}
*, *:before, *:after
{
	 -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
#div_principale
{
	width:900px;
	height:600px;
	margin:auto;
	margin-top:100px;
	font-size: 0px;
}
.categorie 
{
	width:50%;
	height:50%;
	display: inline-block;
	font-size: 20px;
	position: relative;
}



.cache
{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0px;
	left: 0px;
	background-color: #64B6FF;
	z-index: 2;
	display: inline-block;
	color: #B1DAFF;
	text-align: center;
	font-size: 30px;
	line-height:300px;
	vertical-align: middle;
}



.sous_menu
{
	width: 100%;
	height: 100%;
	background-color: gray;
	display: inline-block;
}
.categorie .cache:nth-child(2n)
{
	background-color: #325B7F;
}





$('document').ready(function()
{
	var annimation = ['blind', 'clip', 'drop','slide'];
	$( ".categorie" ).hover(
  function() { // lorsque l'on clique 
  	var id = $(this).attr('id');
   	$("#"+id+" .cache").toggle('blind');
  }, function() { // lorsque l'on sort 

  	var id = $(this).attr('id');
   	$("#"+id+" .cache").toggle('blind');
  }
);
		
});


je ne comprend pas pourquoi lors de l'animation les couleurs css ne sont pas bien prise en conte par jquery ?
en effet pour les couleur "#325B7F" , la couleur change , une fois l'animation fini.
qu'en pensez vous ?
merci d'avance Smiley cligne
merci pour ta réponse mais là je suis confronté à un autre problème plus grave...
pourquoi quand je mets du contenu dans le div ".sous_menu" il y a un décalage ? 

<html>
<head>
	<title>Pendu</title>
	<link rel="stylesheet" type="text/css" href="index.css">
	<link rel="stylesheet" href="jquery-ui-1.11.2.custom/jquery-ui.css">
  <script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script>
  <script src="jquery-ui-1.11.2.custom/jquery-ui.js"></script>
  <script type="text/javascript" src="menu.js"></script>
  <script type="text/javascript" src="recherche.js"></script>
</head>
<body>
	<div id="div_principale">
		<div id="solo" class="categorie">
			<div class="sous_menu"><a href="#">JOUER SEUL</a></div>
			<div class="cache">SEUL</div>
			
		</div>

		<div id="duo" class="categorie">
			<div class="cache">DUO</div>
			<div class="sous_menu"><a href="#">JOUER A DEUX</a></div>
		</div>

		<div id="multi" class="categorie">
			<div class="cache">MULTI</div>
			<div class="sous_menu">mmmmm</div>
			
		</div>

		<div id="ajouter" class="categorie">
			<div class="sous_menu">
				<p>rechercher d'abord le mot dans la base de donnes</p>
				<form action="#" id="forumaire_recherche">
					<input type="search" autocomplete='off'  name="search">
				</form>
				<div id="resultat_recherche">
					<h2>mmm</h2>
					<h2>mmm</h2>
				</div>
				<span id="ajouter_message"></span>


			</div>
			<div class="cache">Ajouter un mot</div>
		</div>



		
	</div>
</body>
</html>





	body
{
	margin: 0px;
	padding: 0px;
}
*, *:before, *:after
{
	 -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
a
{
	text-decoration: none;
	color :#B1DAFF;
}
#div_principale
{
	width:900px;
	height:600px;
	margin:auto;
	margin-top:100px;
	font-size: 0px;
}
.categorie 
{
	width:50%;
	height:50%;
	display: inline-block;
	font-size: 20px;
	position: relative;
}



.cache
{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0px;
	left: 0px;
	background-color: #64B6FF;
	z-index: 2;
	display: inline-block;
	color: #B1DAFF;
	text-align: center;
	font-size: 30px;
	line-height:300px;
}



.sous_menu
{
	width: 100%;
	height: 100%;
	background-color: #586D7F;
	display: inline-block;
	text-align: center;
	color :#B1DAFF;

}
.categorie .cache:nth-child(2n)
{
	background-color: #325B7F;
}

#resultat_recherche
{
	width:200px;
	height: 100px;
	background-color: red;
	margin: auto;
	margin-top: -20px;
	overflow: auto;
	display: none;
}
#resultat_recherche h2
{
	width: 100%;
	height:20px;
	background-color: blue;
	font-size: 15px;
	display: inline-block;
	margin: auto;
}


upload/56312-Capturedec.png


merci d'avance pour votre aide Smiley cligne
Sujet clos
Aller à