我试图在单击超链接时创建水平滑动线。请看一下:
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 class="container">
      <ul>
        <li class="one"><a href="#">Uno</a></li><!--
     --><li class="two"><a href="#">Dos</a></li><!--
     --><li class="three"><a href="#">Tres</a></li><!--
     --><li class="four"><a href="#">Quatro</a></li>
        <hr />
      </ul>
    </div>


没有javascript代码。

当我单击“两个”时,我希望下划线移动到“两个”下,但当前不移动。我需要按住更长的时间才能移动,当我松开鼠标左键时,它会退回到一个

最佳答案

:active仅在您按住元素上的鼠标按钮时(即在您积极点击该元素时)触发。

您可以使用:target代替:active

如果URL中的哈希值和元素的ID相同,则CSS中的:target伪选择器匹配。

通过为链接的href属性和id元素的li赋值,我们可以对已单击的:target进行li:

* {
  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;
}

#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 class="container">
  <ul>
    <li class="one" id="uno"><a href="#uno">Uno</a></li><!--
 --><li class="two" id="dos"><a href="#dos">Dos</a></li><!--
 --><li class="three" id="tres"><a href="#tres">Tres</a></li><!--
 --><li class="four" id="quatro"><a href="#quatro">Quatro</a></li>
    <hr />
  </ul>
</div>

关于html - CSS下划线在点击时不会移动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30502275/

10-09 05:54
查看更多