Сбросить фильтр при наведении

Question

У меня есть карта, где я хочу добавить серый фильтр и удалить его при наведении курсора мыши.Итак, я делаю уроки так:

.profile-pic {
  width: 100%;
  height: auto;
  /* border-radius: 50%; */
  box-shadow: #222 0.2em 0.2em 1em;

  -webkit-filter: grayscale(100%) brightness(135%) contrast(120%);
  filter: grayscale(100%) brightness(135%) contrast(120%);

  transition: filter 0.3s, box-shadow 0.3s;
  -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s;
}
.profile-pic:hover .profile-pic:focus {
  -webkit-filter: none;
  filter: none;
  box-shadow: #224 0.2em 0.2em 0.6em 0.1em;
}

Но если фокусное событие не работает, может кто-нибудь взглянуть, что там происходит:

Существует полный подход: скрипка

Answer 1

Вам нужно добавить запятую между селектором

.profile-pic:hover, .profile-pic:focus

А вот вам скрипка демо