纯css实现中、英文菜单栏内容变换

1.实现思路 ( 超级简单 )：

通过改变margin值即可

a:hover{background-color:purple;color:#FFF;margin-top:-30px;
}

2.查看Demo效果:

整体效果：
hover后：

3.Html代码如下:

 <div><ul><li><a href="#"><span>CF</span><span>穿越火线</span></a></li><li><a href="#"><span>DNF</span><span>地下城与勇士</span></a></li><li><a href="#"><span>LOL</span><span>英雄联盟</span></a></li><li><a href="#"><span>CJ</span><span>绝地求生</span></a></li></ul></div>

4.css代码如下:

 *{margin:0;padding:0;}div{width:400px;height:30px;margin:60px auto;}a{display:block;text-decoration:none;color:blue;font-size:14px;}ul{list-style:none;width:100%;height:100%;overflow:hidden;background-color:#ccc;box-shadow:0 0 2px black;}li{float:left;width:100px;line-height:30px;}span{display:block;text-align:center;height:30px;}a:hover{background-color:purple;color:#FFF;margin-top:-30px;}

如遇错误的地方，还请指正。

结束语…………………………福利时间到………………………………

大家同为程序员，在这里给大家真诚的送上福利。

福利链接点击这里！

纯css实现中、英文菜单栏内容变换相关推荐

.Net(C#)用正则表达式清除HTML标签（包括script和style），保留纯本文(UEdit中编写的内容上传到数据库)...
去官网下载,本Demo用的MVC模式下载地址:http://ueditor.baidu.com/website/download.html 加入文件夹中的结构: 引入了函数公式的图标: @{View ...
一个div 上下两行_纯CSS实现单一div的正多边形变换
纯粹利用CSS,让"单一个"div,从正三角形变换为正八边形(单一div最多只能做到正八边形),最后再搭配动画的效果,变成正多边形的变换动画,也由于正多边形需要用到不少的三角函数计 ...
html中font-family样式,详解中文字体在CSS样式中font-family对应的英文名称
宋体:SimSun 黑体:SimHei 微软雅黑:Microsoft YaHei 微软正黑体:Microsoft JhengHei 新宋体:NSimSun 新细明体:PMingLiU 细明体:Ming ...
如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
php背景图片透明度,css实现背景图片半透明内容不透明代码分享
本文主要和大家介绍了纯css实现背景图片半透明内容不透明的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家. 最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的 ...
纯 CSS 中的简单响应式汉堡菜单
欢迎阅读有关如何创建简单的响应式纯 CSS 汉堡菜单的教程.是的,互联网上有很多其他的汉堡菜单,但其中一些仍然需要使用 Javascript.所以这里是一个纯 CSS 驱动的菜单,而不是一行 Java ...
css实现提示信息,纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局 CSDN:jcLee95 邮箱:291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/ar ...
html中怎么制作太阳月亮交替,使用纯CSS实现太阳和地球和月亮运转模型动画的方法...
使用纯CSS实现太阳和地球和月亮运转模型动画的方法发布时间:2020-09-22 10:42:05 来源:亿速云阅读:140 作者:小新使用纯CSS实现太阳和地球和月亮运转模型动画的方法?这个问 ...

纯css实现中、英文菜单栏内容变换

纯css实现中、英文菜单栏内容变换

1.实现思路 ( 超级简单 )：

2.查看Demo效果:

3.Html代码如下:

4.css代码如下:

纯css实现中、英文菜单栏内容变换相关推荐

最新文章

热门文章