[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:
    1 633
    J'aime reçus:
    239
    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
Développement application mobile Développement d'un site Web ou d'une appli mobile 29 Janvier 2021
Application Cordova/Android et gestion des cookies Développement d'un site Web ou d'une appli mobile 31 Juillet 2020
Une web application Node.JS en iframe Développement d'un site Web ou d'une appli mobile 20 Mai 2020
Logique de fonctionnement d'une application mobile Développement d'un site Web ou d'une appli mobile 17 Mars 2020