Question

我一直在尝试获取li标签，当悬停在标签下划线时，当前，当悬停在li标签上时，该行位于整个li标签下，而不是在a标签下。

HTML，函数内标签上方的简单图标

<li id="underline"><a type="button" id="speakBtn">
              <div class="icon"><i class="fas fa-play"></i></div>
              <div class="title  ">Text To Speech</div>
              </a></li>  
              
          <li class="underline"><a type="button" id="pauseBtn">
              <div class="icon"><i class="fas fa-pause"></i></div>
              <div class="title whiteTxt ">Pause</div>
              </a></li>  
          
          <li class="navButton"><a type="button" id="resumeBtn">
              <div class="icon"><i class="fas fa-play-circle"></i></div>
              <div class="title whiteTxt ">Resume</div>
              </a></li>    
              
          <li class="navButton"><a type="button" id="cancelBtn">
              <div class="icon"><i class="fas fa-stop"></i></div>
              <div class="title whiteTxt ">Stop</div>
              </a></li>

CSS

li和默认显示

.wrapper .sidebar__inner .siderbar_menu li a {
  padding: 10px 50px;
  display: block;
  height: 90px;
  position: relative;
  margin-bottom: 1px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}


.wrapper .sidebar__inner .siderbar_menu a {
  background-image:linear-gradient(#fff,#fff);
  background-position:bottom left;
  background-size:0% 2px;
  background-repeat:no-repeat;
  transition:
  background-size .5s,
  background-position 0s 1s;
}

li和一个悬停显示

.wrapper .sidebar__inner .siderbar_menu li.active {
  background: #a6a6a6;
  
}

.wrapper .sidebar__inner .siderbar_menu a:hover,
.wrapper .sidebar__inner .siderbar_menu a.active {
  color: #fff;
  background-position:bottom left;
  background-size:100% 2px;
}

Answer 1

我认为您想这样：

body {
  background: blue;
}
.wrapper .sidebar__inner .siderbar_menu {
  list-style: none;
  padding: 0;
}
.wrapper .sidebar__inner .siderbar_menu li {
  text-align: center; /*Css add*/
  display: inline-block; /*Css add*/
}
.wrapper .sidebar__inner .siderbar_menu li a {
  padding: 10px 50px;
  display: inline-block; /*Css Change*/
  height: 20px;
  position: relative;
  margin-bottom: 1px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}
.wrapper .sidebar__inner .siderbar_menu a {
  background-image:linear-gradient(#fff,#fff);
  background-position:bottom left;
  background-size:0% 2px;
  background-repeat:no-repeat;
  transition:
  background-size .5s,
  background-position 0s 1s;
}
.wrapper .sidebar__inner .siderbar_menu li.active {
  background: #a6a6a6;  
}
.wrapper .sidebar__inner .siderbar_menu a:hover,
.wrapper .sidebar__inner .siderbar_menu a.active {
  color: #fff;
  background-position:bottom left;
  background-size:100% 2px;
}

<div class="wrapper">
  <div class="sidebar__inner">
    <ul class="siderbar_menu">
      <li id="underline"><a type="button" id="speakBtn">
        <div class="icon"><i class="fas fa-play"></i></div>
        <div class="title  ">Text To Speech</div>
        </a>
      </li>
      <li class="underline"><a type="button" id="pauseBtn">
        <div class="icon"><i class="fas fa-pause"></i></div>
        <div class="title whiteTxt ">Pause</div>
        </a>
      </li>
      <li class="navButton"><a type="button" id="resumeBtn">
        <div class="icon"><i class="fas fa-play-circle"></i></div>
        <div class="title whiteTxt ">Resume</div>
        </a>
      </li>
      <li class="navButton"><a type="button" id="cancelBtn">
        <div class="icon"><i class="fas fa-stop"></i></div>
        <div class="title whiteTxt ">Stop</div>
        </a>
       </li> 
    </ul>
  </div>
</div>

Answer 2

li:hover a{
text-decoration: underline;
}

您可以使用班级名称代替li和anchor标签。

Answer 3

li a:hover{
text-decoration:underline;
}

将鼠标悬停在li上时，如何给标签加上下划线

3 个答案: