利用CSS完成鼠标悬浮时中英文切换

效果：
刚开始时是中文菜单，

鼠标悬浮在某一项时，该项切换成英文且背景颜色改变。

源码：

<!doctype html>
<head><style>*{padding:0px;margin:0px;}html{background:#abcdef;}div{margin:200px auto;width:80%;}ul{list-style:none;overflow:hidden;/*显示英文时，隐藏切换后的中文*/}ul li{float:left;border-bottom:8px solid #f00;}ul li a{background:#f90;display:block;line-height:40px;color:white;font-weight:bold;padding:0px 5px;margin:0px 1px;}ul li a span{display:none;}    ul li a:hover{background:#00f;margin-top:-40px;/*鼠标悬浮上去时，将中文向上移动40px，*/} ul li a:hover span{display:block;}  </style>
</head>
<body><div><ul><li><a>学校简介<span>About hpu</span></a></li><li><a>管理机构<span>Departments</span></a></li><li><a>院系设置<span>School</span></a></li><li><a>招生就业<span>Enrollment</span></a></li><li><a>科学研究<span>Research</span></a></li></ul><div>
</body>

利用CSS完成鼠标悬浮时中英文切换相关推荐

HTML CSS 的鼠标悬浮，点击的样式
HTML CSS 的鼠标悬浮,点击等样式的编写 (以 a 便签为例子) 当鼠标悬浮时:a:hover <style>a:hover{font-size:19px;color:#000000 ...
web前端入门到实战：CSS鼠标悬浮图片模糊切换效果
分享一段代码实例,它实现了图片的模糊效果. 默认状态下,图片是模糊的,当鼠标悬浮那么图片会恢复正常状态. 代码实例如下: <!doctype html> <html> < ...
纯css实现鼠标悬浮、点击更改元素背景
一.使用方案 css伪类 active:元素被点击时变色,点击后颜色消失 focus:元素被点击后变色,点击后颜色不消失 hover:鼠标悬浮时变色,移除后颜色消失二.代码 template部分代码 ...
【前端】html+css实现鼠标悬浮变色的按钮，消除加粗边框发生抖动现象的两种方法 hover【HTML+CSS+JavaScript(JS)】
效果: 代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
CSS实现鼠标悬浮时背景图片拉近且增加遮罩层效果
效果预览点击查看效果我们在浏览网站时会发现有一些图片在鼠标悬浮在上时会有放大拉近的效果. 想要实现这个效果有两种方法,第一种方法是控制背景图片,第二种方法是控制插入的图片,我们这里介绍第一 ...
CSS实现鼠标悬浮时下拉菜单栏功能
个人学习笔记,欢迎评论,虚心接受批评和建议. 效果图: 下拉效果: 实现要点: 菜单内容:无序列表,居中菜单定位:relative absolute(子元素li要根据菜单实现相对定位,父元素ul必须 ...
HTML+CSS制作鼠标悬浮上去可以放大的照片墙?
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
HTML鼠标悬浮空心圆点切换图片,js实现鼠标切换图片（无定时器）
本文实例为大家分享了js实现鼠标切换图片的具体代码,供大家参考,具体内容如下实现效果,可以利用鼠标移动在对应的小点点上,或者点击左右两侧的箭头切换图片,并在图片的上方显示出图片的页数,下方显示出对应 ...
css 实现鼠标悬浮时等比放大图片,鼠标移出时还原图片
实现思想,将图片外层放一个隐形的div容器,图片小比div容器要小, div容器的大小要大于图片放大的尺寸,css 可要自行调整大小这样当图片放大时,就不会影响页面的其他元素,因为它只在隐形的div容 ...
使用CSS实现鼠标悬浮标题出现动态下划线
今天来实现下面图片的效果要实现这种效果只需要使用到background这个属性了. 首先创建有个div 输入一段文字然后在设置background属性这时候页面就会出现这样子文字背景填充满了 ...

利用CSS完成鼠标悬浮时中英文切换

利用CSS完成鼠标悬浮时中英文切换相关推荐

最新文章

热门文章