Javascript changer le CSS de plusieurs div
Résolu
kelukelu
Messages postés
15
Date d'inscription
Statut
Membre
Dernière intervention
-
karinSpace -
karinSpace -
Bonjour,
J'aimerai savoir s'il est possible avec du javascript de modifier le css d'une div en passant sur une autre div en mouseover.
Voici un exemple parce que c'est pas très clair ce que j'ai dit : https://www.momkai.com/
>Quand on survol le logo, les 2 blogs de gauche change de background et de couleur de font. Et la même, si on survol un bloc de texte.
Je cherche depuis ce matin et je trouve pas de réponse sur le net. Je suis une quiche en javascript.
Merci d'avance
J'aimerai savoir s'il est possible avec du javascript de modifier le css d'une div en passant sur une autre div en mouseover.
Voici un exemple parce que c'est pas très clair ce que j'ai dit : https://www.momkai.com/
>Quand on survol le logo, les 2 blogs de gauche change de background et de couleur de font. Et la même, si on survol un bloc de texte.
Je cherche depuis ce matin et je trouve pas de réponse sur le net. Je suis une quiche en javascript.
Merci d'avance
A voir également:
- Javascript changer le CSS de plusieurs div
- Changer dns - Guide
- Changer de carte graphique - Guide
- Changer extension fichier - Guide
- Changer wifi chromecast - Guide
- Changer clavier qwerty en azerty - Guide
8 réponses
si tu ne comprends pas ce que fait, et comment est construit cette ligne:
document.getElementById("cible").style.background = "#f00";
alors je pense qu'il faut que tu ailles faire un tour sur des tutoriaux (genre www.siteduzero.com)
document.getElementById("cible").style.background = "#f00";
alors je pense qu'il faut que tu ailles faire un tour sur des tutoriaux (genre www.siteduzero.com)
<html>
<head>
<style type="text/css">
div {
position: absolute;
width:50;
height:50;
}
#controleur {
top: 50;
background-color: #555;
}
#cible {
top: 100;
background-color: #999;
}
</style>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("cible").style.background = "#f00";
}
function mouseOut()
{
document.getElementById("cible").style.background = "#999";
}
</script>
</head>
<body>
<div id="controleur" onmouseover="mouseOver()" onmouseout="mouseOut()"></div>
<div id="cible"></div>
</body>
</html>
Merci pour le lien.
Je suis tombé sur ce code. Mais je vois pas comment l'utiliser pour modifier une image d'une autre div que celle la
Je suis tombé sur ce code. Mais je vois pas comment l'utiliser pour modifier une image d'une autre div que celle la
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
C'est nikel. Merci beaucoup.
J'ai encore une petite question : comment je peux faire pour attribuer la fonction à une div en particulier ?
J'ai encore une petite question : comment je peux faire pour attribuer la fonction à une div en particulier ?
tu mets
onmouseover="mouseOver()" onmouseout="mouseOut()"comme attribut de l'élément html en question.
ça c'est bon.
le probleme c'est que j'aimerai identifié la fonction par un id.
ainsi je pourrai utiliser les fonctions mouseOver et mouseOut plusieurs fois pour des éléments différents.
parce que la, c'est que tous les id réagissent sur le meme bloc.
je pensais que cette méthode serait bonne :
>javascript
function mouseOver(logo)
{
document.getElementById("fvb").style.backgroundColor = "#fff"
}
function mouseOut(logo)
{
document.getElementById("fvb").style.backgroundColor = "#000"
}
function mouseOver(bloc)
{
document.getElementById("title").style.backgroundColor = "#fff"
}
function mouseOut(bloc)
{
document.getElementById("title").style.backgroundColor = "#fff"
}
>html
<a id="logo" onmouseover="mouseOver(this.logo)" onmouseout="mouseOut(this.logo)"></a>
<a id="bloc" onmouseover="mouseOver(this.bloc)" onmouseout="mouseOut(this.bloc)"></a>
mais en fait, la les 2 onmouseover interagissent que sur le bloc "title", au lieu que "logo" interagisse avec "fvb" et "bloc" avec "title"
le probleme c'est que j'aimerai identifié la fonction par un id.
ainsi je pourrai utiliser les fonctions mouseOver et mouseOut plusieurs fois pour des éléments différents.
parce que la, c'est que tous les id réagissent sur le meme bloc.
je pensais que cette méthode serait bonne :
>javascript
function mouseOver(logo)
{
document.getElementById("fvb").style.backgroundColor = "#fff"
}
function mouseOut(logo)
{
document.getElementById("fvb").style.backgroundColor = "#000"
}
function mouseOver(bloc)
{
document.getElementById("title").style.backgroundColor = "#fff"
}
function mouseOut(bloc)
{
document.getElementById("title").style.backgroundColor = "#fff"
}
>html
<a id="logo" onmouseover="mouseOver(this.logo)" onmouseout="mouseOut(this.logo)"></a>
<a id="bloc" onmouseover="mouseOver(this.bloc)" onmouseout="mouseOut(this.bloc)"></a>
mais en fait, la les 2 onmouseover interagissent que sur le bloc "title", au lieu que "logo" interagisse avec "fvb" et "bloc" avec "title"
function mouseOver(un_id)
{
document.getElementById(un_id).style.backgroundColor = "#fff"
}
function mouseOut(un_id)
{
document.getElementById(un_id).style.backgroundColor = "#000"
}
>html
<div id="logo01"></div><a id="logo" onmouseover="mouseOver('logo01')" onmouseout="mouseOut('logo01')"></a>
<div id="bloc01"></div><a id="bloc" onmouseover="mouseOver('bloc01')" onmouseout="mouseOut('bloc01')"></a>