Background au focus sur safari

Bonjour à tous,
j'ai une liste de lien et j'aimerais que lorsque l'on passe au focus le lien ai un background.
J'ai réussi mais sur safari et firefox ça ne marche pas ...
Merci de vos réponses

  .title {
    line-height: 35px;
    border-bottom: 2px solid rgba(#000, 0);
    transition: 0.3s ease;
    & a {
      outline: none;
      &:focus {
        outline: none;
        background: darken(#fff, 10%);
        border-radius: 3px;
        color: lighten(#000, 15%);
      }
    }

Modifié par vzytoi (24 Jun 2020 - 19:03)

Salut,

T'as essayé juste en CSS ? C'est bien compilé ? Il te donne quel style l'inspecteur de Firefox ? Normalement un background doit pas poser de soucis.

_laurent a écrit :
Salut,

T'as essayé juste en CSS ? C'est bien compilé ? Il te donne quel style l'inspecteur de Firefox ? Normalement un background doit pas poser de soucis.

Merci de ta réponse, le code compilé :

.nav-links .links .title a {
  width: 145px;
  height: 35px;
  line-height: 35px;
  display: block;
  text-align: center;
  outline: none;
}
.nav-links .links .title a:focus {
  outline: none;
  border-radius: 3px;
  background: #e6e6e6;
  color: #262626;
}

( oui j'ai modifier un peu mon code entre temps, voici le code )

    .title {
      a {
        width: 145px;
        height: 35px;
        line-height: 35px;
        display: block;
        text-align: center;
        outline: none;
          &:focus {
            outline: none;
            border-radius: 3px;
            background: darken(#fff, 10%);
            color: lighten(#000, 15%);
          }
      }

Pour répondre à ta question quand je force le :focus avec l'inspecteur firefox le background s'affiche correctement ... Étrange
Modifié par vzytoi (24 Jun 2020 - 23:52)

vzytoi a écrit :
Pour répondre à ta question quand je force le :focus avec l'inspecteur firefox le background s'affiche correctement ... Étrange

Alors c'est que ca marche bien... t'as pas un autre élément qui prendrait le focus devant le a ?

_laurent a écrit :

Alors c'est que ca marche bien... t'as pas un autre élément qui prendrait le focus devant le a ?

Non en fait ma barre d'adresse prend le focus en boucle

Salut. Tu devrais te faire un CodePen, rien que d'isoler ton code et de l'écrire il y a 95% de chance pour que tu trouves le problème, pour les 5% restants il restera les alsanautes...

Hello,
Bête question, mais est-ce que ton écran est suffisement bien calibré que pour faire une différence entre #FFF et #E6E6E6 ? J'ai déjà vu beaucoup d'écran qui n'affichait pas la différence…

Olivier C a écrit :
Salut. Tu devrais te faire un CodePen, rien que d'isoler ton code et de l'écrire il y a 95% de chance pour que tu trouves le problème, pour les 5% restants il restera les alsanautes...

Je vais faire un codepen voir si ça me débloque quelque chose.
Merci de ta réponse

Yordi a écrit :
Hello,
Bête question, mais est-ce que ton écran est suffisement bien calibré que pour faire une différence entre #FFF et #E6E6E6 ? J'ai déjà vu beaucoup d'écran qui n'affichait pas la différence…

Oui, j'ai regardé sur google la couleur et elle s'affiche correctement.
Merci de ta réponse

Oui mais ceci dit on parle désormais du hover et non plus du focus. De plus, en l'état, le menu n'est plus accessible (un hover sur un élément non sélectionnable), du moins il l'est mais sans être accompagné par l'effet comme au départ. Oui alors j'ai loupé quelque chose...
Modifié par Olivier C (26 Jun 2020 - 07:03)

Je poste sur ce forum depuis 10 ans, je fais du front depuis 2009.

Malgré cela il y a plein de trucs à côté desquels je suis passé. Mais j'ai tout de même le sentiment (l'illusion ?) d'avoir compris :hover, :focus et :active.