169it科技资讯


当前位置:  编程技术>WEB前端

纯CSS实现鼠标放上去改变文字内容

    来源: 互联网  发布时间:2014-10-07

css样式

代码如下:

.remind span {display:block;margin-top:-22px;}
.remind a:hover {padding-top:22px;}
.remind a {float:left;overflow:hidden;}
.remind{height:22px;line-height:22px;overflow:hidden;padding-left:10px;}

html代码

代码如下:

<div ><a href="#"><span>如需修改帐号,请发送修改信息及相关证明至邮箱</span>提示</a></div>

具体实例

鼠标经过变换文字 #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; }
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    
相关技术文章:
    ▪li中插入img图片间有空隙的解决方案

     直接加样式img{vertical-align:bottom; display:block} 当然在某些情况下无效,比如我要加三个图片,上中下,中间的图片是设为背景,发现用此方法无效,只是上和中的图片空隙没了,而下与中之间还存在,方法很简单,把vertical-align:bottom改成top,可根据自己遇到的不同情况来设vertical-align的参数 方法一: 代码如下:img{vertical-align:top; display:block} 代码如下:<style>#l1 {float:left;background:#000;}#l1 ul li {list-style:none;padding:0;margin:0}img {ve......


    ▪CSS3中Transition属性详解以及示例分享

     1、transition-property的语法[css]transition-property :all(所有属性改变) || [attr] (指定要运动的样式)|| none(没有属性改变)   2、transition-property的属性值  (1)none:transition马上停止执行  (2)all:元素产生任何属性值变化时都将执行transition效果  (3)attr:指定要运动的样式 一、transition-property——指定要运动的样式   1、transition-property的语法[css]transition-property :all(所有属性改变) || [attr] (指定要运动的样式)|| none(没有属性改变)   2、transition-property的属性值  (1)none:transition马上停止执行  (2)all:......


    ▪父div高度不能自适应子div高度的解决方案

     代码如下:<div id="parent"><div id="content"> </div></div> 当content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。解决方案如下: 代码如下:<div id="parent">  <div id="content"></div>  <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>  </div> 在层的最下方产生一个高度为1的空格,可解除这个问题。 另外还有这样写的:<div style="hei......


 
最新技术文章:
    ▪css white-space:nowrap属性用法(可以强制文字不换行输出)

     强制不换行,直接使用white-space:nowrap即可。CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象例:强制不换行 代码如下: div{white-space:nowrap;} ......


    ▪IE里button设置border:none属性无效解决方法

     某个元素设置无边框,只需要给元素设置border:none即可,当然设置border:0效果一样,但实际上两者是有性能差别的 代码如下:border:none:边框设置为为none,不做任何处理;border:0:边框宽度设置为0像素,但是实际上border-color和border-style还是在渲染的。然而在IE中,对于button和input元素确并不是这样,在IE6,7中border:none仅等价于border-style:none,而边框所占的空间还是在的。这导致了调input的宽度和高度在各个浏览器中不统一!在IE6,7中,虽然设置了border:none后,边框仍存在。不信你试一试。下面给......


    ▪border:none与border:0使用区别

     一、border:noneborder-style的简写在chrome审查元素看到以下结果 代码如下:element.style {border: none;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;border-width: initial;border-color: initial;}在firefox中用firebug查看元素会看到以下结果: 代码如下:element.style {    border: medium none;}注意这个medium值二、border:0border-width的简写在chrome审查元素看到以下结果......


 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号