css : Animation sur effet hover d'un menu

[Goudurisc]

Bonsoir,

Je souhaiterais pouvoir afficher une petite image animée au survol d'un menu.

En effet, une simple image qui apparaît et disparaît brutalement, c'est pas top.

Bien entendu, on peut toujours utiliser un gif animé mais un peu rustique et lourd.

Mon ambition est très modeste, un effet d'opacité tout bête ferai mon bonheur.

Est-ce possible en css 3 ? javascript ? autre ?

Merci !!

[Jaypee]

Exemple de changement de couleur du fond pendant survol:
http://stackoverflow.com/questions/4411306...ackground-color

Test en direct dans jsfiddle:
http://jsfiddle.net/K5Qyx/
J-P

Ce message a été modifié par Jaypee - 6 Feb 2016, 08:18.

[Goudurisc]

Merci beaucoup Jaypee mais je recherche cet effet avec une image.

Par exemple, au survol d'une rubrique, un rond s'affiche juste en dessous dans un mouvement en partant du centre.

Cet effet offre pas mal de perspectives en terme d'animation de menu.

Ça fait tellement de temps que je recherche cette solution que je me demande si elle existe. Pourtant, ça paraît tellement évident

[No6]

ta demande est un peu vague, et il y a beaucoup de solutions.

en css pur tu peu en passer par une image en sprite sur le background de ton bouton

sinon dès que tu passes a javascript tu a 10.000 posibilitées, et encore autant si tu utilise jQuery, et encore autant si tu utilise une bibliothèque jQuery comme GSAP.js
Sans oublier que par dessus tout cela, depuis le HTML5 tu peux utiliser du svg en direct, et donc le scripter aussi


quelques exemples ;
https://www.grafikart.fr/tutoriels/html-css...burger-icon-580
https://www.grafikart.fr/tutoriels/javascri...design-wave-644

http://tympanus.net/codrops/2015/02/26/ins...styles-effects/
http://tympanus.net/codrops/2015/02/11/sub...edback-effects/

et plus généralement : http://tympanus.net/codrops/

bonne lecture !

Ce message a été modifié par No6 - 6 Feb 2016, 23:07.

[Goudurisc]

Salut,

Grand merci, il y a des chose très sympa dans ces tutos (comme mon effet recherché "marin" dans http://tympanus.net/Development/ClickEffects/) mais quand je vois le code à décrypter et ensuite à adapter, c'est un peu chaud, en tout cas à mon niveau.

De l'effet simple, que je sais réaliser à la même version animé, pas la même approche.

Mais les tutos proposés sont assez évolués, peut-être qu'il existe plus simple ?

[No6]

Mon ambition est très modeste, un effet d'opacité tout bête ferai mon bonheur.

le plus simple : changer l'opacité sur le hover en css

Code

button { background-color: rgba(48,48,84, 1); }
button:hover { background-color: rgba(48,48,84, 0.4); }

ps: j'ai mis n'importe quoi comme couleur

http://www.alsacreations.com/tuto/lire/909...uleur-rgba.html

Ce message a été modifié par No6 - 6 Feb 2016, 23:20.

[Goudurisc]

Merci à nouveau pour ton retour mais là du coup, c'est trop simple, en effet, je parviens sans pb à réaliser un changement de couleur (ou d'opacité) en survol de mes rubriques mais uniquement dans le cadre d'un background-color et pas background-image.

Hors je souhaite une animation avec un rond en arrière plan (ou un cercle, je ne suis pas difficile;) et je ne vois pas comment gérer cet effet uniquement en css sans passer par une image...

Mais je serais sidéré de voir que ça n'existe pas, mais je n'ai pas d'exemple de réalisation sous la main.

[No6]

Hors je souhaite une animation avec un rond en arrière plan (ou un cercle, je ne suis pas difficile;) et je ne vois pas comment gérer cet effet uniquement en css sans passer par une image...

comme je l'ai déjà écrit :

en css pur tu peu en passer par une image en sprite sur le background de ton bouton

http://www.alsacreations.com/tuto/lire/106...d-position.html

[Goudurisc]

Merci beaucoup pour cette nouvelle piste !

J'ai regardé tout ça mais ce n'est pas encore très limpide, je retiens que ça permet d'optimiser le téléchargement des images mais je ne vois aucun cas concret avec résultat animé. Parfois, un bon fichier source permet de comprendre plus rapidement.

Mais bon, je reconnais qu'il faudrait que j'y passe plus de temps et c'est un peu compliqué pour moi en ce moment.

[No6]

le principe des sprites est très simple.
On utilise une seule image pour tous les boutons, chaque bouton utilisant seulement une partie de la surface de l'image,, via son positionnement (background-position)

on peut aussi déplacer cette position lors d'un hover sur le bouton.
c'est ce qui t'intéresse: d'un coté de l'image un bouton neutre, de l'autre coté de l'image un bouton avec ton rond dessiné.

[Goudurisc]

faire apparaître mon rond en survol sous mes rubriques n'est pas un pb, c'est l'effet d'animation du rond que je ne vois pas comment réaliser et je n'ai rien vu à ce sujet dans la technique des sprites.

Les effets dont tu m'as envoyé le lien sont vraiment parfaits (http://tympanus.net/Development/ClickEffects/), il faut que je tente de les exploiter mais dans l'immédiat, je n'ai malheureusement pas le temps.

Tu m'as au moins mis sur la meilleure piste est c'est déjà énorme ! merci

[Jaypee]

L'idée que tu recherches, ne serait-elle pas de composer vraiment l'image dans in div invisible en HTML, puis de jouer sur la visibilité du div en variant sa transparence/visibilité au survol du lien?

J-P

[Goudurisc]

Déjà, l'effet rêve pour moi est ici : http://tympanus.net/Development/ClickEffects/

Mais plus modestement, il s'agit effectivement de partir d'une image invisible à l'état initial et qu'elle apparaissent en background dans un simple effet d'opacité au survol d'une rubrique. J'avoue que je ne peux pas mieux décrire mon besoin

[Jaypee]

La petite difficulté qui fait que CSS seul ne suffit pas c'est que l'élément porteur de l'effet (l'image), n'est pas celui qui reçoit l'événement de survol (la rubrique, le lien...)

Lorsque c'est le même élément, c'est facile, selon un exemple trouvé par Google, les codes à entrer dans jsfiddle:
html:

Code

<body>
<div class="greydout">
      <img src="http://0.tqn.com/d/webdesign/1/0/C/m/1/puppy-in-shade.jpg" width="300" height="266" />
</div>
</body>

css:

Code

.greydout {
  -webkit-opacity: 0.0;
  -moz-opacity: 0.0;
  opacity: 0.0;
}

.greydout:hover {
  -webkit-opacity: 1.0;
  -moz-opacity: 1.0;
  opacity: 1.0;
  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -ms-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}

L'opacité est à zéro au départ, mais l'événement de survol provoque l'activation d'un autre style, avec une transition.

La solution pour générer un événement ailleurs que dans la rubrique survolée:

Code

var e = new jQuery.Event("hover");
e.pageX = <centre de l'image x>;
e.pageY = <centre de l'image y>;
$("#rubrique").trigger(e);

J-P

Ce message a été modifié par Jaypee - 8 Feb 2016, 14:41.

[No6]

http://codepen.io/sethabbott/pen/FtuLz

[Goudurisc]

Merci beaucoup à tous les deux pour cette nouvelle tentative de me faire aller de l'avant mais dans ce cas, il faut que je pose le pb avec tous les ingrédients.

Je travaille depuis un thème premium wordpress plutôt bien développé. J'ai créé un thème enfant dans lequel je peux intervenir au niveau des pages function.php, header.php (je peux donc ajouter du html)... et bien entendu style.css.

Actuellement, j'ai placé un rond tout bête qui s'affiche en survol (Cf. capture nav). Mon style

Code

#main-navigation ul.menu > li:hover > a {
    box-shadow: none!important;
    background-image: url(img/main-menu-curseur.jpg);
    background-repeat: no-repeat!important;
    background-position: 50% 70%!important;
}

Jaypee

J'ai bien testé ton code, l'image s'affiche effectivement en survol mais dans mon cas, il faut que l'image s'affiche en dessous de mes rubriques, en background. Si je suis ce code, ce sont mes rubriques qui vont se faner en survol et non pas l'image en dessous, c'est sur ce point que je bloque. Si j'appelle l'image depuis le background-image, c'est toute la rubrique et l'image qui sont impactées par opacity: 0.0;
(Et pour je ne sais pas comment générer un événement jQuery, juste le placer en head et entre balise <script> </SCRIPT> ? Mais bon cette partie n'est pas encore prioritaire.)


No6
Effet forcément impressionnant. L'essentiel de ce code me semble compréhensible mais pas de là à pouvoir le transposer à ma nav. Et si je comprends bien, l'effet choisi est "@keyframes rotate" ce qui suppose qu'il existe d'autres effets @keyframes comme "@keyframes opacity"
Mais bon au final, la question reste la même, comment agir non pas sur le la rubrique mais sur le background...

Bonne soirée !

[No6]

Merci beaucoup à tous les deux pour cette nouvelle tentative de me faire aller de l'avant mais dans ce cas, il faut que je pose le pb avec tous les ingrédients.

Je travaille depuis un thème premium wordpress plutôt bien développé. J'ai créé un thème enfant dans lequel je peux intervenir au niveau des pages function.php, header.php (je peux donc ajouter du html)... et bien entendu style.css.

No6
Effet forcément impressionnant. L'essentiel de ce code me semble compréhensible mais pas de là à pouvoir le transposer à ma nav. Et si je comprends bien, l'effet choisi est "@keyframes rotate" ce qui suppose qu'il existe d'autres effets @keyframes comme "@keyframes opacity"
Mais bon au final, la question reste la même, comment agir non pas sur le la rubrique mais sur le background

Ouai, en fait si j'ai bien compris tu principalement jouer que sur le css, et à peine sur la génération PHP.

Déjà en PHP tu peux ajouter un span caché
sinon en css tu peux aussi jouer sur les selecteurs ::before et ::after

et dessiner un rond en css, c'est tres simple faut juste que le border-radius fasse la moitée du width qui est egal au height bien sur.
ensuite jouer avec border-width pour l'épaisseur du rond...

T'as bien fait de pas me dire tout de suite que tu bosse sur du word press, parceque je déteste ce truc pourri

[Jaypee]

il y a une propriété CSS qui peut aider lorsque deux éléments sont superposés:

pointer-events: ...;

Regarde la doc, cela permettrait de faire traiter les événements par l'image au lieu de la rubrique
https://developer.mozilla.org/fr/docs/Web/CSS/pointer-events

Pour assaisonner un thème Wordpress avec JQuery, il y a la mauvaise et la bonne méthode, comme indiqué ici: https://wordpress.org/support/topic/adding-...e-the-right-way

Nouvelle approche HTML+CSS (encore imparfaite): On triche en ce sens qu'on décale l'image invisible de sorte qu'elle passe sous le texte de la rubrique (float left + marge négative)
Puis l'animation agit aussi sur la marge pour faire réapparaître le texte.
HTML:

Code

<body>
      <div class="overlay">Rubrique A
        <a href="java script:alert('Hello A!');">
          <div>
            <img src="http://0.tqn.com/d/webdesign/1/0/C/m/1/puppy-in-shade.jpg" width="300" height="266" class="fadein" /></div>
        </a>
      </div>
      <div class="overlay">Rubrique B
        <a href="java script:alert('Hello B!');">
          <div>
            <img src="http://0.tqn.com/d/webdesign/1/0/C/m/1/puppy-in-shade.jpg" width="300" height="266" class="fadein" /></div>
        </a>
      </div>
</body>

CSS:

Code

.fadein {
  -webkit-opacity: 0.0;
  -moz-opacity: 0.0;
  opacity: 0.0;
  margin-top: -16px;
}

.fadein:hover {
  margin-top: 0;
  -webkit-opacity: 1.0;
  -moz-opacity: 1.0;
  opacity: 1.0;
  -webkit-transition: all 3s ease-in;
  -moz-transition: all 3s ease-in;
  -ms-transition: all 3s ease-in;
  -o-transition: all 3s ease-in;
  transition: all 3s ease-in;
}

.overlay {
  -webkit-opacity: 1.0;
  -moz-opacity: 1.0;
  opacity: 1.0;
  color: blue;
  text-weight: bold;
  float: left;
}

C'est très imparfait. Je l'admets aisément.

J-P

Ce message a été modifié par Jaypee - 9 Feb 2016, 10:03.

[Goudurisc]

No6, pour tout dire, quand on ne dispose pas d'un très haut niveau en développement et que l'on doit malgré tout vivre de ses activités graphiques, ce qui est mon cas, Wordpress est un outil assez remarquable pour peu qu'on dompte la bête et qu'on en connaisse les failles.
Sinon, la page function.php permet d'injecter la plupart des fonction sans pb.

Cela dit, je suis toujours en recherche d'amélioration et c'est pour cette raison que je m'acharne à mettre au point ce petit effet qui donne une touche pro à des site parfois un peu amateurs.

Mais j'apprécie encore une fois ton aide à sa juste valeur

Jaypee, même remerciement pour le temps que tu passes à essayer de trouver une solution ! Effectivement ton dernier exemple n'ai pas tout à fait ce que je recherche mais ça s'en rapproche.
Puisque mon besoin se limite à un rond, pourquoi ne pas tenter de fonctionner déjà avec un border-radius comme le propose judicieusement No6 et non pas avec une photo ?

Enfin, je ne sais pas si c'est envisageable mais la source fournie par No6 (dont je joins les fichiers) est idéale pour moi, si ce n'est que l'effet serait aussi sympa en survol. Le lien est aussi là : http://tympanus.net/Development/ClickEffects/
La seule question : est-ce transposable dans mon projet Wordpress

[Jaypee]

Le principe HTML + CSS est simple:

- Une propriété (top-margin ou opacity ou border-radius)
- Un style avec deux variantes:

-- Style de base
---Le CSS définit les valeurs de départ (petit padding, opacity nulle, mrgin negative..)


-- Style avec :hover
---Le CSS définit les valeurs d'arrivée (grand padding, opacity 1.0, margin à 0)
---Le CSS inclut la transition.

Avec ça tu devrais pouvoir coder ton thème sans grande difficulté

La difficulté que tu as introduite et qu'il faut éviter: Ajouter un autre élément (image de fond)
J-P

Ce message a été modifié par Jaypee - 9 Feb 2016, 17:23.

[No6]

Enfin, je ne sais pas si c'est envisageable mais la source fournie par No6 (dont je joins les fichiers) est idéale pour moi, si ce n'est que l'effet serait aussi sympa en survol. Le lien est aussi là : http://tympanus.net/Development/ClickEffects/
La seule question : est-ce transposable dans mon projet Wordpress

primo le bon lien à répéter c'est https://github.com/codrops/ClickEffects

ensuite ce système ne fonctionne pas sur les anciens navigateurs, je l'ai mis juste en info pour comprendre ce que tu veux faire, et j'avoue que ce n'est toujours pas très clair pour moi.

(le bouton de base, il a quelle forme? si le rond apparait il est par dessus / par dessous? déborde du bouton ? l'effet d'opacité c'est pour le bouton ?, le rond ?, etc... j'aime bien la précision)

Sinon pour ton effet via un hover, tu a bien conscience que cela ne fonctionnera pas sur les écrans tactiles ?
(mais ton site n'et peut-etre pas responsif?)

Ce message a été modifié par No6 - 9 Feb 2016, 17:36.

[Goudurisc]

Merci pour le lien corrigé ! je note

Pour l'effet sur les anciens navigateurs, je pars du principe qu'ils n'afficheront tout simplement pas l'effet, seul le survol couleur classique sera pris en compte.

SI ma demande n'est toujours pas claire, c'est peut-être qu'elle est trop simple et que tu n'imagines pas une seconde que je ne m'en sorte pas tout seul

Il s'agit vraiment d'une simple navigation texte, la plus basique du monde. Actuellement, tu passes le curseur sur chaque rubrique et le lien change de couleur, bref, l'effet rustique mais toujours efficace.

Je souhaite uniquement afficher un rond (ou un cercle) au-dessous de chaque rubrique quand on la survole. Pour l'instant, j'affiche ce rond sans pb en appelant l'image via un background-image basique.

La seule chose que je souhaite, c'est faire en sorte que mon rond ne s'affiche pas trop brutalement, un effet progressif du type opacité ferait l'affaire.

Je note déjà que je peux remplacer mon image par un un border-radius suivant tes indications;

Enfin, comme tu l'as compris, j'ai "juste" la limite de Wordpress et de mon thème. Cela dit, je peux injecter du php (function.php), du html (header.php) et bien entendu, du css en remplacement de celui existant.

Je ne sais pas si tout ça est bien clair

[No6]

CODE

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>bouton effet rond</title>
<style type="text/css">

body { margin: 30px;}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

button {
margin: 5px;
border: 1px solid black;
text-align: center;
font: normal bold 16px/1.4 sans-serif;
color: darkblue;
background-color: aqua;
width:100px;
height: 26px;
position: relative;
}

button span {
position: absolute;
top:-25px;
left:15px;
width:70px;
height: 70px;
background-color: transparent;
border: 7px solid rgba(0, 0, 255, 0);
border-radius: 40px;
display: block;
z-index: 1000;
-webkit-transition: border-color 1.5s linear;
-moz-transition: border-color 1.5s linear;
-o-transition: border-color 1.5s linear;
transition: border-color 1.5s linear;
}

button:hover span {
border-color: rgba(0, 0, 255, 0.5 );
}

</style>
</head>
<body>
<button>Bouton 1 <span></span></button>
<button>Bouton 2 <span></span></button>
<button>Bouton 3 <span></span></button>
<button>Bouton 4 <span></span></button>
</body>
</html>

Ce message a été modifié par No6 - 10 Feb 2016, 19:48.

[Goudurisc]

C'est exactement ce que je recherche , c'est parfait ! Mais... le "mais" qui tue : mais je suis bien entendu confronté à la manière dont la nav a été réalisée dans mon template.

En effet, ce n'est pas une nav fixe et je ne vois pas où je pourrais ajouter les span de ton code.

La seule possibilité pour moi est d'intervenir sur le css. Actuellement, pour charger mon rond, j'ai utilisé le css suivant

Code

#main-navigation ul.menu > li:hover > a {
    background-image: url(img/main-menu-curseur.jpg);
    background-repeat: no-repeat!important;
    background-position: 50% 70%!important;
}

J'imagine que ça ne t'apportera pas grand chose mais si l'effet avait été possible à partir des différents états bouton (a, a:hover), ça aurait été génial.

Bon, je sens que je te fais bosser pour rien et que mon pb est insoluble mais, au moins, ça m'a permis de découvrir le principe, ce qui est déjà pas mal

Merci à nouveau pour le temps que tu passes sur cette demande mais je crains que ça coince sur ce dossier précis

[No6]

Je croyais que tu pouvais injecter les spans via le dénérateur sous php...

alors Ok, sans les span mais je garantis moins le positonnement sous les différent navigateurs..

CODE

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>bouton effet rond</title>
<style type="text/css">

body { margin: 30px;}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

button {
margin: 5px;
border: 1px solid black;
text-align: center;
font: normal bold 16px/1.4 sans-serif;
color: darkblue;
background-color: aqua;
width:100px;
height: 26px;
position: relative;
}

button:after {
content: " ";
position: absolute;
top:-30px;
left:7px;
width:70px;
height: 70px;
background-color: transparent;
border: 7px solid rgba(0, 0, 255, 0);
border-radius: 40px;
display: block;
z-index: 1000;
-webkit-transition: border-color 1.5s linear;
-moz-transition: border-color 1.5s linear;
-o-transition: border-color 1.5s linear;
transition: border-color 1.5s linear;
}

button:hover:after {
border-color: rgba(0, 0, 255, 0.5 );
}

</style>
</head>
<body>
<button>Bouton 1</button>
<button>Bouton 2</button>
<button>Bouton 3</button>
<button>Bouton 4</button>
</body>
</html>

[scoch]

C'est exactement ce que je recherche , c'est parfait ! Mais... le "mais" qui tue : mais je suis bien entendu confronté à la manière dont la nav a été réalisée dans mon template.

En effet, ce n'est pas une nav fixe et je ne vois pas où je pourrais ajouter les span de ton code.

Comme tu l'as écrit plus haut, tu peux modifier le code HTML généré par WordPress à partir du fichier functions.php. Cela se fait avec les filtres qui permettent d'utiliser une fonction perso à la place d'une fonction native :

Code

function fonction_perso() {
    // instructions
}
add_filter('fonction_native', 'fonction_perso');

Reste à savoir quelle fonction utilise ton thème pour générer la navigation.

Au pire, tu pourrais injecter les éléments span en JavaScript…

Ce message a été modifié par scoch - 11 Feb 2016, 09:49.

[Goudurisc]

No6, je suis à un pas de la réussite , mais bon, tout dépend de la pointure de la chaussure !

J'ai donc tenté d'adapter ton code au mien et j'obtiens un résultat parfait sur la première rubrique de ma navigation. En fait, mon cercle s'affiche quand je suis sur la zone de mon menu et non pas sur chaque rubrique. Quand je sors de la zone de menu, le cercle se fane parfaitement.

Bref, si j'arrive à produire cet effet sur chaque rubrique, c'est jackpot !! Actuellement, j'ai réduit le code au minimum avec mes paramètres graphiques :

Code

#main-navigation {
            position: relative;
}
    
#main-navigation:after {
    content: " ";
    position: absolute;
    top: 86px;
    left: -7px;
    width: 70px;
    height: 70px;
    background-color: transparent;
    border: 3px solid #FFF;
    border-radius: 35px;
    display: block;
    z-index: 1000;
    -webkit-transition: border-color 0.2s linear;
    -moz-transition: border-color 0.2s linear;
    -o-transition: border-color 0.2s linear;
    transition: border-color 0.2s linear;
}
        
#main-navigation:hover:after {
    border-color: #e6e6e7;;
}

scoch, merci pour ta suggestion mais je crois que tu m'entraînes sur une piste qui dépasse mes compétences

[No6]

c'est sur
#main-navigation ul.menu > li:hover > a

qu'il faut plecer les hover et after...

#main-navigation ul.menu > li:hover > a:after {
et
#main-navigation ul.menu > li:hover > a:hover:after {

ça c'est le b.a.ba du css

Ce message a été modifié par No6 - 11 Feb 2016, 15:30.

[Goudurisc]

ça c'est le b.a.ba du css

J'espère que je n'ai pas tenté à un moment de te faire croire que j'étais un dévelopeur de haut vol Je suis plutôt penché du côté graphique mais je ne peux pas faire l'économie d'un minimum connaissances en css, j'apprends donc dans la douleur... mais j'apprends dans la mesure de mes maigres capacités. Comme par exemple le "after" dont je découvre l'usage...

Bon, après la nouvelle greffe, je passe bien d'un bouton à l'autre mais l'effet de mon cercle a disparu :

Code

#main-navigation {
            position: relative;
}
    
#main-navigation ul.menu > li:hover > a:after {
    content: " ";
    position: absolute;
    top: 86px;
    left: -7px;
    width: 70px;
    height: 70px;
    background-color: transparent;
    border: 3px solid transparent;
    border-radius: 35px;
    display: block;
    z-index: 1000;
    -webkit-transition: border-color 0.2s linear;
    -moz-transition: border-color 0.2s linear;
    -o-transition: border-color 0.2s linear;
    transition: border-color 0.2s linear;
}
        
#main-navigation ul.menu > li:hover > a:hover:after {
    border-color: #e6e6e7;;
}

Merci pour ta ténacité et ton sang froid face à l'adversité !

[No6]

#main-navigation {
position: relative;
}

a remplacer par

#main-navigation ul.menu > li:hover > a {
position: relative;

psst: CSS Cascading Style Sheets

ce qui fait que les feuilles de stype fonctionnent comme une arborescente

les brances filles hérites des branches parent.

dans le cas présent seule la position du <a ...> est relative, pas celle de ses branches parents

ce qui permet de positionner le block a:after (enfant) en relatif par rapport à lui.

quand à l'idée de rendre le cercle {border: 3px solid transparent;

c'est pas bon; une opacité à zéro fait la même chose, et il y a peut être une regle de priorité qui interdit le changement de couleur sur un hover

enfin la ,je sais pas trop faut tester

si tu met border: 3px solid blue; le cercle reste bien visible ???