专栏首页卡少编程之旅对列表hover效果的小探讨

对列表hover效果的小探讨

有hover效果的页面导航的制作思路

在做顶部页面导航时,很多情况下网站需要鼠标悬停的底部高亮线的效果。这部分nav一般是采用ul+lian+a的方式来做,li设置display为行内块元素。今天的想法是让这个悬停产生的线如何跟这个字的宽度相同,而不是li的宽度?

这个想法的关键在于这个悬停线统一是用伪元素来实现的,伪元素的宽度就是这个悬停线的宽度,因此css类选择器应该是 .nav ul li a:hover::after的格式。但还是出现了一些小问题,比如这个a的宽度只能是被里面文字撑开的宽度,不能设置值 一般对a就设置width:100%即可。 但导航的文字之间是有空隙的,这个是个技巧,也就是设置li的margin值,从而让导航按钮之间有个等大的间隔。 具体实现代码如下:

<div class="nav">
   <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">特卖</a></li>
      <li><a href="#">儿童</a></li>
      <li><a href="#">学习机</a></li>
      <li><a href="#">加入我们</a></li>
      <li><a href="#">APP下载</a></li>
   </ul>
</div>
.nav{width:450px; height:26px; position:absolute; right:24%; bottom:18px;}
.nav ul::after{content: ""; display: block; clear:both;}
.nav ul li{ float: left; height:26px; line-height: 26px; position:relative;margin:0 12px;}
.nav ul li a{font-size:18px; color:#464646; display: block; }
.nav ul li a:hover::after{content:"";width:100%; 
border-bottom:2px solid #49d7e7; position: absolute;
left:0; bottom:-18px;}

一点小记录,希望对新人有启示作用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • REACT框架学习心得

    卡少
  • 网页实现把文本复制到粘贴板

    卡少
  • fiddler抓包工具(windows)

    卡少
  • JQuery实现子级选择器

    skylark
  • JQuery实现层级菜单

    skylark
  • JQ实现二级导航菜单

    实用JQ实现导航二级菜单效果,导航菜单在网站中非常常见,有的网站可能会出现三级菜单及多级菜单模式,下面我们来简单的实现一个二级菜单的效果。

    申霖
  • HTML5 div css3漂亮的侧边菜单栏

    Java学习123
  • 利用JQuery实现左侧菜单栏可折叠功能

    今天给大家介绍一下左侧菜单栏可折叠功能,在后台管理中左侧菜单折叠功能是特别常见的一个功能,基本不管是什么类型的管理后台都会涉及到这个功能的实现。 今天给大家介绍...

    林老师带你学编程
  • 符合标准的有序列表分页源码示例

    一个符合标准的有序列表分页源码示例。 你可以根据你所应用的不同程序语言,打包生成一个符合标准的分页控件。 DOM结构: <ul class="paginatio...

    练小习
  • Web 前端利器Emmet 的HTML用法总结

    在tutsplus 那里看到一篇文章介绍Emmet 的用法,形象的gif图片一目了然,本来想翻译过来的(虽然翻译用法倒不是很难),但搜索发现已经有国人翻译过了,...

    Jeff

扫码关注云+社区

领取腾讯云代金券