在悬停操作上删除过滤器

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;
}

但是就像焦点事件不起作用，有人可以看看那里发生了什么：

有完整的方法：fiddle

Answer 1

您需要在选择器

之间添加逗号

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

这是你的小提琴demo