[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 801
    J'aime reçus:
    273
    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
Besoin d'aide pour le lancement de mon Application Demandes d'avis et de conseils sur vos sites 12 Août 2021
Besoin d'aide pour la compréhension d'une application Développement d'un site Web ou d'une appli mobile 1 Août 2021
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
Qu'en penser ? l'application prochaine du CCP Act Référencement Google 19 Novembre 2019