自丢网

标题: css实现鼠标放上去更换改变文字内容特效功能代码效果 [打印本页]
作者: admin    时间: 2020-9-17 17:19
标题: css实现鼠标放上去更换改变文字内容特效功能代码效果
css实现鼠标放上去更换改变文字内容特效功能代码效果
css语法代码如下：
  1. .remind span {display:block;margin-top:-22px;}
  2. .remind a:hover {padding-top:22px;}
  3. .remind a {float:left;overflow:hidden;}
  4. .remind{height:22px;line-height:22px;overflow:hidden;padding-left:10px;}
复制代码
html代码如下：
  1. <body>
  2.     <ul id="Menu">
  3.         <li><a href="#"><span>HOME</span>自丢首页</a></li>
  4.         <li><a href="#"><span>NEWS</span>自丢新闻</a></li>
  5.         <li><a href="#"><span>ABOUT</span>关于自丢</a></li>
  6.         <li><a href="#"><span>CONTACT</span>联系自丢</a></li>
  7.         <li><a href="#"><span>照片</span>PHOTO</a></li>
  8.     </ul>
  9. </body>
复制代码
完整代码如下：
  1. <head>
  2.     <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  3.     <title>鼠标经过变换文字</title>
  4.     <style>
  5.         #Menu {
  6.             width: 500px;
  7.             margin: 50px auto;
  8.             border: 1px solid #CCC;
  9.             overflow: hidden;
  10.         }
  11.         
  12.         #Menu ul {
  13.             margin: 0;
  14.             padding: 0;
  15.             list-style: none;
  16.         }
  17.         
  18.         #Menu li {
  19.             width: 100px;
  20.             height: 22px;
  21.             line-height: 22px;
  22.             float: left;
  23.             overflow: hidden;
  24.             text-align: center;
  25.         }
  26.         
  27.         #Menu a {
  28.             width: 100px;
  29.             float: left;
  30.             overflow: hidden;
  31.         }
  32.         
  33.         #Menu span {
  34.             display: block;
  35.             margin-top: -22px;
  36.         }
  37.         
  38.         #Menu a:hover {
  39.             padding-top: 22px;
  40.         }
  41.     </style>
  42. </head>

  44. <body>
  45.     <ul id="Menu">
  46.         <li><a href="#"><span>HOME</span>自丢首页</a></li>
  47.         <li><a href="#"><span>NEWS</span>自丢新闻</a></li>
  48.         <li><a href="#"><span>ABOUT</span>关于自丢</a></li>
  49.         <li><a href="#"><span>CONTACT</span>联系自丢</a></li>
  50.         <li><a href="#"><span>照片</span>PHOTO</a></li>
  51.     </ul>
  52. </body>
复制代码





欢迎光临 自丢网 (https://www.zidiu.com/) Powered by Discuz! X3.5