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

cherrylee
  • 1.2k

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

clipboard.png

回复
阅读 1.4k
10 个回答
✓ 已被采纳

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

底部边框样式:

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

clipboard.png

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

clipboard.png

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

希望对你有所帮助!

<div></div>
div{
    border-bottom:1px solid #fff;
}
div:hover{
    border-bottom:1px solid green;
}

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

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

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

border-bottom就行

border-bottom: 3px solid #09d170

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

yellowStar
  • 2
新手上路,请多包涵

推荐用outline

css就能搞定的事情。

你知道吗?

宣传栏