这种下划线是用css还是js写的？

Question

如下图所示，这种下划线是用css还是js写的？就是把鼠标放上去，会显示下划线，打开f12看了一下，没看到怎么弄的。http://www.sellertree.com/ind...

Answer 1

这种样式一般使用css的border属性来实现。
就你的网站我们来分析一下：

底部边框样式：

自行勾选或取消勾选 border-bottom 属性看看效果

悬浮效果：
自行勾选和取消勾选 hover 看看效果：

我相信经过以上调试与验证，你就知道什么原因了！

希望对你有所帮助！

Answer 2

<div></div>

div{

    border-bottom:1px solid #fff;

}

div:hover{

    border-bottom:1px solid green;

}

Answer 3

很明显不是下划线而像是边框属性

Answer 4

css就可以了
border-bottom+hover
需要注意的是，没有Hover的时候也要给border-bottom一个高度，颜色为透明。
这样Hover的时候不会突然就出来一个下边框

Answer 5

补充下动画实现，单纯的左到右渐变 只需要css3就能实现了，如果要根据鼠标移入方式来动态区分（左至右）（右至左）就需要用js来判断鼠标的移入方向

Answer 6

用outline会好些，因为outline 不会象border那样影响元素的尺寸或者位置，outline不占据空间。
border 可应用于几乎所有有形的html元素，而 outline 是针对链接、表单控件和ImageMap等元素设计。