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

[JeSuisUnUtilisateur]

Bien le bonjour!

Petite question concernant l'utilisation du :nothover) :

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.

 

[rick38]

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) { ... }

 

[JeSuisUnUtilisateur]

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

 

[JeSuisUnUtilisateur]

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) :

<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...