[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover)

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par JeSuisUnUtilisateur, 17 Novembre 2020.

  1. JeSuisUnUtilisateur
    JeSuisUnUtilisateur Nouveau WRInaute
    Inscrit:
    13 Novembre 2020
    Messages:
    6
    J'aime reçus:
    0
    Bien le bonjour! :)

    Petite question concernant l'utilisation du :not:)hover) :

    Voici un exemple, ce sera plus simple pour illustrer mes propos : http://www.css3create.com/Effets-de-survol-avec-transitions-et-filtres-CSS

    Je souhaiterai savoir s'il y avait une astuce pour que, lorsque l'on met la souris sur l'espace (le "parent") situé entre les miniatures, l'effet (ici, le flou et niveau de gris) ne soit pas appliqué à toutes les miniatures.

    L'espace est certes petit mais, dans l'utilisation que j'en fais sur une page, celui-ci est plus important et donc la souris peut se placer aisément entre les miniatures et appliquer l'effet à toutes :(

    Merci de votre aide.
     
  2. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    2 056
    J'aime reçus:
    364
    En regardant vite fait, sans avoir testé (donc à creuser davantage si c'est pas ça), je vois que c'est que l'espace est celui des li, donc une solution serait de prendre en compte non pas le survole du li mais juste celui de l'image :

    en remplaçant ul li:hover img { ... } par ul li img:hover { ... }
    et ul:hover li:not: (hover) img { ... } par ul:hover li img:not: (hover) { ... }
     
  3. JeSuisUnUtilisateur
    JeSuisUnUtilisateur Nouveau WRInaute
    Inscrit:
    13 Novembre 2020
    Messages:
    6
    J'aime reçus:
    0
    Merci pour ta réponse :)

    Malheureusement, le problème sera identique : on met la souris ( :hover ) sur le parent (donc le ul), qui englobe les li, les images, et les marges des li/images.

    J'ai quand même testé, au cas où, mais ça ne fonctionne pas :D
     
  4. JeSuisUnUtilisateur
    JeSuisUnUtilisateur Nouveau WRInaute
    Inscrit:
    13 Novembre 2020
    Messages:
    6
    J'aime reçus:
    0
    C'est tout bon !

    J'avoues que, pendant un moment, je me suis tourné vers Javascript/jQuery (avec mouseover/mouseout, this.id, .not, .className +=, etc...), ça fonctionnait très bien... 'pis j'me suis dit que j'avais un peu sorti le char d'assaut pour rien... J'ai "réétudié" le html/css et, en gros, comme ma structure correspondait à peu près à ça (pour faire simple) :

    HTML:
    <div class="container">
        <a class="liens" href="" title="">
            <img class="miniatures" src="" alt="">
            <h5>...</h5>
        </a>
    </div>
    J'ai juste joué sur le padding du a, pour faire une marge à l'intérieur des div .container.

    Du coup, il y a bien des espaces blancs entre les miniatures mais ceux-ci correspondent à un élément (aux .liens) et non plus à "rien".

    Bref, j'ai encore cherché beaaaaucoup trop compliqué pour pas grand chose... :confused:
     
Chargement...
Similar Threads - [CSS] Application (non Forum Date
[CSS] Alignement de cadre. Développement d'un site Web ou d'une appli mobile 24 Mai 2013
[CSS] Aligner une image à coté d'une div en display:table-cell ? Développement d'un site Web ou d'une appli mobile 2 Mai 2012
[CSS] Alignement vertical du texte Développement d'un site Web ou d'une appli mobile 20 Avril 2011
[css] Petit souci pour le menu du jour! Développement d'un site Web ou d'une appli mobile 29 Août 2010
[css] Comment centrer un bloc css? Développement d'un site Web ou d'une appli mobile 25 Août 2010
[CSS] Comment faire apparaître le sous-menu ? Développement d'un site Web ou d'une appli mobile 22 Juillet 2010
[CSS] Overflow, float:right, et internet explorer Développement d'un site Web ou d'une appli mobile 10 Août 2009
[css] <li> image en vertical-align:bottom Développement d'un site Web ou d'une appli mobile 18 Juillet 2009
[CSS] bouton non cliquable Développement d'un site Web ou d'une appli mobile 16 Juillet 2009
[CSS] IE8 Développement d'un site Web ou d'une appli mobile 15 Juillet 2009
[CSS] decalage image et texte Développement d'un site Web ou d'une appli mobile 18 Juin 2009
[CSS] : scroller overflow et ie6 :-( Développement d'un site Web ou d'une appli mobile 12 Mai 2009
[CSS] bouton submit + image arriere plan Développement d'un site Web ou d'une appli mobile 20 Avril 2009
[CSS]Positionner la colonne centrale en haut du source Développement d'un site Web ou d'une appli mobile 29 Mars 2009
[Résolu] [CSS] Lien sur tout un div Développement d'un site Web ou d'une appli mobile 23 Février 2009
[CSS] L'élément body Développement d'un site Web ou d'une appli mobile 21 Décembre 2008
[CSS] : menus déroulants Développement d'un site Web ou d'une appli mobile 15 Décembre 2008
[CSS] : problème de mise en page FF3 Développement d'un site Web ou d'une appli mobile 31 Août 2008
[CSS] (encore!) pas compatible FF Développement d'un site Web ou d'une appli mobile 30 Juin 2008
[RESOLU] [CSS] : rajouter une div Développement d'un site Web ou d'une appli mobile 26 Juin 2008