我试图在单击超链接时创建水平滑动线。请看一下:
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/