0

I currently trying to get a hover effect to work however I cannot seem to find the hover and focus states in inspect element so I think they not showing up anyone now where I am going wrong? Also worth noting I am running 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>
George Halls
  • 11
  • 7
  • duplicate of http://stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter – cimmanon Apr 15 '16 at 13:04

2 Answers2

2

Change

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

to

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

The :hover and :focus selectors are pseudo-classes, and therefore should take precedence over pseudo-elements such as ::before and ::after.

serebit
  • 400
  • 2
  • 13
Koen
  • 634
  • 3
  • 14
0

::before and :focus/:hover have to be switched.

Oh, I see someone else was before me xD

Maarten Wolfsen
  • 1,625
  • 3
  • 19
  • 35