将鼠标悬停在链接上时，在下方从左到右排列一条线

我正在尝试在列表中的悬停链接下方从左到右设置一条线。现在，悬停时什么也没发生。

https://jsfiddle.net/60vufuv5/1/

这是一个让它只在单个链接上工作的例子，但我在上面的小提琴上没有任何运气：https://jsfiddle.net/4bgkcoaq/

<nav class="contact-nav">
  <ul>
    <li><span class="name_2"><a href="mailto:xxx@gmail.com">xxx@gmail.com</a><div class="slider"></div></span></li>
    <li>+1-347-419-7751</li>
  </ul>
</nav>

li name_2:hover > .slider {
  width: 100%;
}

您需要在元素上设置初始宽度 0 和透明的底部边框。然后在悬停时，将该宽度扩展到 100%，并为底部边框指定颜色。

像这样：

.name_2 {
  display: inline-block;
  transition: all 2s ease-in-out;
  border-bottom: 2px solid transparent;
  position: relative;
  margin: 0 auto;
  width: 0%;
}
.name_2:hover{
   border-bottom: 2px solid black;
   width: 100%;
}

更新的小提琴

这可能会

对您有所帮助.这是使用html的另一种方法，css四行jquery.只需复制并尝试一下。

<html>
<head>
<title>Welcome !</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <style type="text/css">
    .myclass{
        width: 100px;
        height: 100px;
        background-color: orange;
        position: absolute;
    }
  </style>
</head>
<body>
  <div class="myclass">
  </div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".myclass").mouseenter(function(){
            $(this).animate({left:400});
        });
    });
</script>

</body>
</html>

相关内容

最新更新

热门标签：