请选择 进入手机版 | 继续访问电脑版
深圳市金黑网络技术有限公司:主营高端网站建设,网络推广,商城/系统开发,公众号小程序app开发等业务。
admin 发表于 2020-9-17 17:19 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题 |

☛ 深圳市金黑网络技术有限公司主营业务 ☚

网站建设,托管维护,网站SEO优化,关键词优化排名,全网推广,商城开发,系统开发,美工设计,域名主机,公众号小程序app软件开发等

欢迎联系我们,QQ:515138 手机/微信:17817817816

联系我们
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>

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

推荐给好友: [复制链接]
推荐文章
回复

使用道具 举报

相关帖子

发布主题
  • 网站建设

    高端网站设计制作

  • 模板制作

    仿站/效果图转模板

  • 网络推广

    关键词优化/全网推广

  • 技术维护

    网站维护/异常处理

  • 小程序开发

    公众号/小程序开发

  • 系统开发

    商城系统/各类系统开发

  • 定制开发流程

    业务咨询 | 提交需求 | 报价报时 | 付款开工

    联系我们
  • 今日更新:0 昨日更新:2
  • 会员总数:481 模板总数:10100
全国最大PB建站模板下载平台
在线技术QQ

515138

周一至周日9:00-23:00

如有侵权请联系我们

515138@qq.com 在线QQ咨询

微信扫码关注我们