Changer plusieurs styles dans une div en rollover [Résolu]

Signaler
Messages postés
112
Date d'inscription
lundi 6 avril 2009
Statut
Membre
Dernière intervention
17 janvier 2015
-
Messages postés
112
Date d'inscription
lundi 6 avril 2009
Statut
Membre
Dernière intervention
17 janvier 2015
-
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

Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
115
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>
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
115
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
Messages postés
112
Date d'inscription
lundi 6 avril 2009
Statut
Membre
Dernière intervention
17 janvier 2015

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
Messages postés
112
Date d'inscription
lundi 6 avril 2009
Statut
Membre
Dernière intervention
17 janvier 2015

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
Messages postés
112
Date d'inscription
lundi 6 avril 2009
Statut
Membre
Dernière intervention
17 janvier 2015

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