IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Mettre en forme une div au survol de la souris


Sujet :

jQuery

  1. #1
    Membre à l'essai
    Homme Profil pro
    Dépanneur informatique
    Inscrit en
    septembre 2021
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Dépanneur informatique

    Informations forums :
    Inscription : septembre 2021
    Messages : 30
    Points : 21
    Points
    21
    Par défaut Mettre en forme une div au survol de la souris
    Bonjour, je voudrais mettre un style au survol de la souris sur une div sachant que j'en ai 6, donc 1 à la fois.

    Chez moi le style s'appliquent à tous les divs en même temps.

    Voici mon code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
     
    (function($) {
     
    	var columns = $(".columns");
    	var prestationIcon = $(".prestation_icon");
    	var title = $("h3");
    	var prestationText = $(".prestation_text");
    	var prestationButton = $(".prestation_button");
     
    	columns.hover(function() {
     
    		columns.css("background-color","#01546b");
    		prestationIcon.css({"background-color":"#0ac6fc","color":"#fff"});
    		title.css("color","#fff");
    		prestationText.css("color","#fff");
    		prestationButton.css({"background-color":"#0ac6fc","color":"#fff"});
    },
    function() {
     
    		columns.css("background-color","#fff");
    		prestationIcon.css({"background-color":"#01546b","color":"#fff"});
    		title.css("color","#000");
    		prestationText.css("color","#000");
    		prestationButton.css({"background-color":"#fff","color":"#000"});
    });
     
    })(jQuery);
    Besoin d'aide, merci d'avance.

  2. #2
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 897
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 897
    Points : 2 839
    Points
    2 839
    Par défaut
    Bonjour,

    Vous faites tout le temps référence à la variable columns à l'intérieur des méthodes, donc ça sélectionne toutes les colonnes à chaque fois.
    Vous devriez plutôt utiliser $(this).

    J'ai réalisé un petit exemple fonctionnel sur base de votre code : https://codepen.io/DarkStar123456/pe...R?editors=0010
    Exemple :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    columns.hover(function() {
     
    		$(this).css("background-color","#01546b");

    Par contre est-ce vraiment nécessaire de faire tout ça en JS ??
    Au pire, vous faites juste un toggleClass() plutôt que d'avoir tout dans du JS.
    (ça ne change rien au fait qu'il faudra toujours référencer $(this) ^^)

Discussions similaires

  1. Afficher une div au survol de la souris sur une autre div
    Par Stouille89 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 24/06/2010, 14h54
  2. Modifier les propriétés d'une div au survol d'une autre
    Par umeboshi dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 18/09/2008, 19h02
  3. Mettre en forme une textbox par masque ou "feinte"
    Par nicolas2603 dans le forum VBA Access
    Réponses: 4
    Dernier message: 20/02/2008, 17h26
  4. Réponses: 24
    Dernier message: 28/08/2006, 12h55
  5. [VB]Comment mettre en forme une grille de données
    Par CBleu dans le forum VB 6 et antérieur
    Réponses: 8
    Dernier message: 02/02/2006, 10h58

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo