Question

我试图在li悬停时试图转换，但悬停似乎被忽略，没有任何反应。如果我改为使用导航ul：hover＆＃39;，它可以正常工作，但条形图会弹出所有句子。

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

Answer 1

.nav-li:hover .nav-li::after应为.nav-li:hover::after

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试将两者合并。

.nav-li:hover::after

示例：https://jsfiddle.net/pc26LnLz/1/

css不会在课堂上工作

2 个答案: