html – CSS下划线不能点击

概述我试图创建滑动水平线点击超链接。请看看： http://codepen.io/anon/pen/JdEPPb HTML是： * { box-sizing: border-box; } body { font: 300 100% 'Helvetica Neue', Helvetica, Arial; } .container 我试图创建滑动水平线点击超链接。请看看：
http://codepen.io/anon/pen/JdEPPb

HTML是：

* {      Box-sizing: border-Box;    }        body {      Font: 300 100% 'Helvetica Neue',Helvetica,Arial;    }        .container {      wIDth: 50%;      margin: 0 auto;    }        ul li {      display: inline;      text-align: center;    }        a {      display: inline-block;      wIDth: 25%;      padding: .75rem 0;      text-decoration: none;      color: #333;    }        .one:active ~ hr {      margin-left: 0%;    }    .two:active ~ hr {      margin-left: 25%;    }        .three:active ~ hr {      margin-left: 50%;    }        .four:active ~ hr {      margin-left: 75%;    }        hr {      height: .25rem;      wIDth: 25%;      margin: 0;      background: tomato;      border: none;      Transition: 0.3s ease-in-out;    }

<div >      <ul>        <li ><a href="#">Uno</a></li><!--     --><li ><a href="#">Dos</a></li><!--     --><li ><a href="#">Tres</a></li><!--     --><li ><a href="#">Quatro</a></li>        <hr />      </ul>    </div>

没有JavaScript代码。

当我点击二，我想要下划线移动在二，但目前它不动。我需要持续更长时间才能移动，当我释放鼠标左键时，它会回到一个

解决方法 ：仅当您按住元素上的鼠标按钮(即当您正在主动单击元素时)，激活才会触发。

您可以使用：target而不是：active。

当URL中的哈希和元素的ID相同时，CSS中的目标伪选择符会匹配。

通过为li元素的链接和IDs的href属性赋予值，我们可以：定位已点击的li：

* {  Box-sizing: border-Box;}body {  Font: 300 100% 'Helvetica Neue',Arial;}.container {  wIDth: 50%;  margin: 0 auto;}ul li {  display: inline;  text-align: center;}a {  display: inline-block;  wIDth: 25%;  padding: .75rem 0;  text-decoration: none;  color: #333;}#uno:target ~ hr {  margin-left: 0%;}#dos:target ~ hr {  margin-left: 25%;}#tres:target ~ hr {  margin-left: 50%;}#quatro:target ~ hr {  margin-left: 75%;}hr {  height: .25rem;  wIDth: 25%;  margin: 0;  background: tomato;  border: none;  Transition: 0.3s ease-in-out;}

<div >  <ul>    <li  ID="uno"><a href="#uno">Uno</a></li><!-- --><li  ID="dos"><a href="#dos">Dos</a></li><!-- --><li  ID="tres"><a href="#tres">Tres</a></li><!-- --><li  ID="quatro"><a href="#quatro">Quatro</a></li>    <hr />  </ul></div>

总结

以上是内存溢出为你收集整理的html – CSS下划线不能点击全部内容，希望文章能够帮你解决html – CSS下划线不能点击所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。