悬停和焦点不起作用答案

【问题标题】：Hover and focus not working悬停和焦点不起作用
【发布时间】：2016-04-15 21:28:21
【问题描述】：

我目前正在尝试使悬停效果起作用，但是我似乎无法在检查元素中找到悬停和焦点状态，所以我认为他们现在没有向任何人显示我哪里出错了？另外值得注意的是，我正在运行 autoprefixer。

CSS

.nav-wrapper {
  display: flex;
  padding: 12px 10px 10px;
  flex-flow: column;
}
.nav-wrapper a {
  margin-top: 30px;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.2);
  font-weight: 700;
  position: relative;
  display: inline-block;
  outline: none;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}

.nav-wrapper a::before {
  color: green;
  content: attr(data-hover);
  position: absolute;
  transition: transform 0.7s, opacity 0.7s;
}
.nav-wrapper a::before:hover, .nav-wrapper a::before:focus {
  transform: scale(0.9);
  opacity: 0;
}

HTML

  <nav class="nav-wrapper">
    <a class="nav-child" data-hover="About Me" href="#">About Me</a>
    <a class="nav-child" data-hover="Work" href="#">Work</a>
    <a class="nav-child" data-hover="Process" href="#">Process</a  >
    <a class="nav-child" data-hover="Contact Me" href="#">Contact Me</a>
  </nav>

【问题讨论】：

与stackoverflow.com/questions/5777210/…重复

标签： html css css-selectors css-animations

【解决方案1】：

改变

.nav-wrapper a::before:hover, .nav-wrapper a::before:focus

到

.nav-wrapper a:hover::before, .nav-wrapper a:focus::before

:hover 和 :focus 选择器是伪类，因此应优先于 ::before 和 ::after 等伪元素。

【讨论】：

【解决方案2】：

::before 和 :focus/:hover 必须切换。

哦，我看到别人在我之前xD

【讨论】：