css is hover not working on class

Question

I'm trying to get a bar to transition in when the li is hovered over however the hover seems to be ignored and nothing happens. If I instead put 'nav ul:hover', it works but the bar pops in under all the li's.

<nav>
  <ul>
    <li class="nav-li">All Departments</li>
    <li class="nav-li">Shop by Room</li>
    <li class="nav-li">DIY Projects & Ideas</li>
    <li class="nav-li">Home Services</li>
    <li class="nav-li">Speacials & Offers</li>
    <li class="nav-li">Local Ad</li>
  </ul>
</nav>

CSS

.nav-li {
margin-right: 40px;
display: inline-block;
padding-bottom: 2em;
transition: all .5s ease;
cursor: pointer;
position: relative;
}

.nav-li::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width .5s ease;
}

.nav-li:hover .nav-li::after {
background-color: #f96302;
width: 100%;
}

Attach ::after immediately after :hover and it should work

SidTheBeard
– SidTheBeard

2017-12-09 00:44:28 +00:00
Commented Dec 9, 2017 at 0:44 — SidTheBeard
– SidTheBeard, Commented Dec 9, 2017 at 0:44

Gabriele Petrioli · Accepted Answer · 2017-12-09 00:44:24Z

2

The .nav-li:hover .nav-li::after should be .nav-li:hover::after

.nav-li {
  margin-right: 40px;
  display: inline-block;
  padding-bottom: 2em;
  transition: all .5s ease;
  cursor: pointer;
  position: relative;
}

.nav-li::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  transition: width .5s ease;
}

.nav-li:hover::after {
  background-color: #f96302;
  width: 100%;
}

<nav>
  <ul>
    <li class="nav-li">All Departments</li>
    <li class="nav-li">Shop by Room</li>
    <li class="nav-li">DIY Projects & Ideas</li>
    <li class="nav-li">Home Services</li>
    <li class="nav-li">Speacials & Offers</li>
    <li class="nav-li">Local Ad</li>
  </ul>
</nav>

answered Dec 9, 2017 at 0:44

Gabriele Petrioli

197k35 gold badges276 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JMay Over a year ago

Yep...That fixed it...Thank you

Blackmagyk · Accepted Answer · 2017-12-09 00:48:18Z

1

Try combining the two.

.nav-li:hover::after

Example: https://jsfiddle.net/pc26LnLz/1/

answered Dec 9, 2017 at 0:48

Blackmagyk

805 bronze badges

Collectives™ on Stack Overflow

css is hover not working on class

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related