学习啦>学习电脑>电脑硬件知识>键盘鼠标>

怎么实现css实现鼠标滑过改变文字

沈迪豪分享

  学习前端的同学你们知道怎么实现css实现鼠标滑过改变文字(中文变英文)的效果吗?不知道的话跟着学习啦小编一起来学习怎么实现css实现鼠标滑过改变文字的方法。

怎么实现css实现鼠标滑过改变文字

  代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <title>鼠标经过变换文字</title>

  <style>

  #Menu {

  width:500px;

  margin:50px auto;

  border:1px solid #CCC;

  overflow:hidden;

  }

  #Menu ul {

  margin:0;

  padding:0;

  list-style:none;

  }

  #Menu li {

  width:100px;

  height:22px;

  line-height:22px;

  float:left;

  overflow:hidden;

  text-align:center;

  }

  #Menu a {

  width:100px;

  float:left;

  overflow:hidden;

  }

  #Menu span {

  display:block;

  margin-top:-22px;

  }

  #Menu a:hover {

  padding-top:22px;

  }

  </style>

  </head>

  <body>

  <ul id="Menu">

  <li><a href="#"><span>HOME</span>首页</a></li>

  <li><a href="#"><span>NEWS</span>新闻</a></li>

  <li><a href="#"><span>ABOUT</span>关于</a></li>

  <li><a href="#"><span>CONTACT</span>联系</a></li>

  <li><a href="#"><span>照片</span>PHOTO</a></li>

  </ul>

  </body>

  </html>

现css实现鼠标滑过改变文字相关文章:

1.怎么实现鼠标滑过变色

2.js实现鼠标移到图片显示文字

3.css设置鼠标事件

4.css怎么设置鼠标变背景

5.css怎么改变鼠标样式

    1952288