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 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
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 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
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

Discussions similaires

Bouton télécharger
ensat10 -
ensat10 -

4 réponses
Comment exécuter une application VB.net en lui passant des paramètres
speyrard -
speyrard -

3 réponses
Comment télécharger un fichier depuis https
cs_JGD -
cmarcotte -

11 réponses
Relancer une application
cs_Phil72000 -
Phil72000 -

5 réponses
affichage du résultat dans un label en vbet
glody -
Whismeril -

1 réponse
Rejoignez-nous