1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Changer plusieurs styles dans une div en rollover

Résolu
projer
Messages postés
112
Date d'inscription
lundi 6 avril 2009
Statut
Membre
Dernière intervention
17 janvier 2015
 - 13 janv. 2012 à 11:56
projer
Messages postés
112
Date d'inscription
lundi 6 avril 2009
Statut
Membre
Dernière intervention
17 janvier 2015
 - 13 janv. 2012 à 15:57
bonjour, j'ai donc un petit problème sur lequel je bloque.

J'ai donc besoin de réaliser ceci :



vous aurez compris que ce sont des liens vers les derniers articles de blog publiés qui sont affichés ici et, quand on survole un de ses articles, le style doit changer. 




28-12-11

Benoit Lambert sur France Inter

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.




28-12-11

Benoit Lambert sur France Inter

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.




28-12-11

Benoit Lambert sur France Inter

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.


j'ai bien réussi à changer le css de la balise avec un hover mais ça change toutes les balises , pas bon. Puis, le bg-color de la date doit changer aussi, autre problème. Je pense donc qu'il faut gérer ça avec du javascript en envoyant ou changeant un style à la balise survolée mais je bloque sur comment la cibler sans modifier les autres.

Si vous pouviez me guider là-dessus, ça m'aiderai beaucoup :)

Merci d'avance!

--------------------------------------------------------

http://www.projer.fr - dev web
http://www.lysdesign.fr - DA print / web - Illustratrice

5 réponses

Réponse 1 / 5
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
 144
13 janv. 2012 à 15:08
il y a cette facon 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<style>
.oute {
background-color:red;
width:400px;
}

.ine{
background-color:blue;
width:400px;
}

.outeh5{
background-color:gray;
color:orange;
}

.ineh5{
background-color:yellow;
color:green;
}
</style>


<script type="text/javascript">

function changeclass(lui) {

var allElements = document.getElementById('depeches').getElementsByTagName('article');

for (var i = 0; i< allElements.length;i++){

if(allElements[i].className=='ine'){
allElements[i].className='oute';
allElements[i].getElementsByTagName('h5')[0].className='outeh5'
}
}
lui.className='ine'
lui.getElementsByTagName('h5')[0].className='ineh5'
} 

</script>
</head>






28-12-11

Benoit Lambert sur France Inter

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.




28-12-11

Benoit Lambert sur France Inter

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.




28-12-11

Benoit Lambert sur France Inter

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.






</html>
3
Réponse 2 / 5
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
 144
13 janv. 2012 à 12:21
bonjour

normalement le hover doit marché si tu l'a assigné au div c'est normalement que sa change tout assigne une classe a chaque articles
0
Réponse 3 / 5
projer
Messages postés
112
Date d'inscription
lundi 6 avril 2009
Statut
Membre
Dernière intervention
17 janvier 2015
13 janv. 2012 à 13:58
En fait je l'avais assigné à #id depeches, je l'ai modifié en l'affectant à article mais ça ne marche pas apparemment sur les balises article, je les ai changées par des div et du coup ça fonctionne pour le fond. Pas encore au point le HTML5...

Maintenant le problème est que ça ne me change ni la couleur du texte de la date et de sa couleur de fond (balise h5), comment changer le css du h5 au survol de la div principale?

Merci

--------------------------------------------------------

http://www.projer.fr - dev web
http://www.lysdesign.fr - DA print / web - Illustratrice
0
Réponse 4 / 5
projer
Messages postés
112
Date d'inscription
lundi 6 avril 2009
Statut
Membre
Dernière intervention
17 janvier 2015
13 janv. 2012 à 14:54
J'ai essayé ceci :


... 

<script type="text/javascript">
//rollover dépêches			
function mouseOver(){
this.getElementsByTagName("h5").style="background-color: #f5131e; color: white;";
}

function mouseOut(){
//alert("out");
}
</script>


mon problème est vraiment de savoir comment cibler la cellule h5...


--------------------------------------------------------

http://www.projer.fr - dev web
http://www.lysdesign.fr - DA print / web - Illustratrice
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
projer
Messages postés
112
Date d'inscription
lundi 6 avril 2009
Statut
Membre
Dernière intervention
17 janvier 2015
13 janv. 2012 à 15:57
Ok, merci beaucoup, je vois mieux comment on gère le ciblage maintenant!

Merci encore pour le temps passé pour me dépanner!


--------------------------------------------------------

http://www.projer.fr - dev web
http://www.lysdesign.fr - DA print / web - Illustratrice
0