对列表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 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

img中alt与title辨析

HTML5学堂:img中alt与title有何不同?本文主要从表现在含义、浏览器中的表现以及对于网站seo优化程度三个方面进行辨析,接下来我们一起来看看。 示例...

2473
来自专栏HTML5学堂

标签的选择

这么多篇文章下来,大家对如何进行页面布局想必已经有了自己的一些想法,特别是上周的文本样式的介绍,让大家可以实现了对整个页面的搭建以及制作。所以基本的制作已经没有...

3529
来自专栏九彩拼盘的叨叨叨

CSS3的属性值inital

属性值inital是指CSS规范(CSS specifications)指定的值。 例如规范中定义: display 的 inital 值为 inline; ...

812
来自专栏郭诗雅的专栏

css+js实现左右滑动卡片组件

最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。

1.7K9
来自专栏我的博客

ewebeditor v3.8水印处理位置调整

今天使用ewebeditor编辑器,发现图片水印不能调节,只能在左上角。于是找相关调节水印代码。找到关键代码,将水印调节到右下角了。 找到php文件夹下的upl...

2935
来自专栏编程

java基础知识,font属性css写法,代码详解!

CSS属性值 字体与文本 网页设计中有很多的文字要去处理,标题、段落、文章、列表以及表单中的文本。这一篇章我们讨论一下HTML中的字体与文本 字体 首先要有一...

2018
来自专栏web开发

img标签实现和背景图一样的显示效果——object-fit和object-position

不知大家在做前端页面的时候,有没有遇到类似这样的问题:有一个不是正方形的图片,可能是宽度大于高度的,也可能是高度大于宽度的,而你又并不想用背景图的方式来做,要实...

4076
来自专栏地方网络工作室的专栏

图片自适应父元素大小,并左右上下居中的css方法

图片自适应父元素大小,并左右上下居中的css方法 前言 这种效果多见于矩形盒子里面调用不规则的图片,希望能够达到的效果。这个效果可以很简单的用css来实现,虽然...

2558
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 布局

面包屑包含当前页面的父页面的链接列表,该列表是层级顺序的。它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前。

9765
来自专栏陈泽钦的专栏

页面性能优化的利器 — Timeline

网页中的重绘过程是影响整体性能下降的关键点之一,因而网站开发者应该更多地去避免在站点中进行不必要以及不适时的重绘步骤,本文主要讲述如何借助Inspector中的...

2.1K1

扫码关注云+社区

领取腾讯云代金券