Question

我试图在点击超链接时创建滑动水平线。请看看： 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代码。

当我点击Two时，我希望下划线在Two下移动，但目前它不移动。我需要保持更长时间才能移动，当我释放鼠标左键时，它会回落到One

Answer 1

:active仅在按住元素上的鼠标按钮时触发 - 即，当您主动单击该元素时。

您可以使用:target代替:active。

当CSS中的哈希值和元素的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>

AVCaptureMovieFileOutput

Answer 2

当鼠标仍然按下时，它会移动。您的问题是:active选择器仅在元素处于活动状态时激活，通常是在按下鼠标时。

您需要添加类.active而不是:active选择器。所以你有：

.one.active ~ hr {
  margin-left: 0%;
}
.two.active ~ hr {
  margin-left: 25%;
}

.three.active ~ hr {
  margin-left: 50%;
}

.four.active ~ hr {
  margin-left: 75%;
}

并添加一些功能：

var elems = document.querySelectorAll(".one,.two,.three,.four");
for (var i = 0; i < elems.length; i++) {
  elems[i].addEventListener("click",function(e){
    if(document.querySelector(".active")){
      document.querySelector(".active").classList.remove("active");
    }
    e.currentTarget.classList.add("active");
  });
}

笔：http://codepen.io/vandervals/pen/wagwBQ

Answer 3

这是您在菜单处于活动状态时获取活动链接的解决方案。您的代码问题是......您使用background: url("../img/Arrow_Circle_Right-32.png")选择器而不是:选择器。还需要使用小javascript。

http://codepen.io/anon/pen/GJrKjB

Answer 4

试试这个Fiddle.

$('ul li').on('click', function() {
    $('li').removeClass('active')
    $(this).addClass('active')
})

CSS下划线没有移动点击

4 个答案: