CSS如何实现hover动态效果的示例代码

html-css023

CSS如何实现hover动态效果的示例代码,第1张

<!DOCTYPE html><html> <head> <meta charset="utf-8"> </head> <style type="text/css"> .wrap {width: 500px height: 500px margin: 0 auto border: 1px solid blue }.con {width: 80% height: 100px margin: 40px auto border: 1px solid black }/*必须在父级hover，兼容：IE6+*/.one:hover p {color: red }/*标签内要加data-title属性，兼容：IE9+*/.two:hover::before {content: attr(data-title)/*取到data-title属性的值*/color: green }.three:hover::after {content: attr(data-title)/*取到data-title属性的值*/color: blue }</style> <body> <p> <p class="con one"> <span>鼠标移进来</span> <p>颜色会变哦</p> </p> <p class="con two" data-title="看我七十二变"> <span>鼠标移进来</span> <p>文字会变哦</p> </p> <p class="con three" data-title="看我七十二变"> <span>鼠标移进来</span> <p>文字会变哦</p> </p> </p> </body></html>

单纯只css做不到这个要求，hover的使用方法如下：

<head>

<title></title>

<style type="text/css">

a:link{color: #F00}

a:visited{color: #00F}

a:hover{color: #0F0}

a:active{color: #FF0}

</style>

</head>

<body>

<p style="color:#399"><a href="#">文字</a></p>

</body>

</html>

但是可以用js辅助完成这个效果，使用onMouseOver（鼠标移到目标上）和onMouseOut（鼠标移开目标后）实现对a标签或其它html标签设置hover样式。

直接对标签使用即可，无论A标签、SPAN标签、DIV标签等均可。

<a style="color:#00Ftext-decoration:none"

onMouseOver="this.style.color='#F00'this.style.textDecoration='underline'"

onMouseOut="this.style.color='#00F'this.style.textDecoration='none'">

DIVCSS5

</a>

以上对a超链接代码设置默认样式、鼠标移到目标上、鼠标移开目标后样式。特点代码比较长。

DIVCSS5重要提示说明：为了看到鼠标移开后与默认样式相同，通常需要直接对标签使用style设置默认CSS样式并且与onMouseOut设置CSS样式保持相同。以免初始状态对象样式与鼠标移开对象后样式的不同。

但是另外需要注意：淘宝的描述页是无法使用外置css或者js模块的，外置css模块需要购买，js模块还没有开放

今天学习一个炫酷的小技能，纯纯css实现动态图标，hover之后静止在某一个图标。

Demo效果如下：

到这里我们的 HTML 文件就全部写完啦

这时候我们就可以得到一个图片的效果。

这里小图标总共有 11 张，相互之间的变化就是 10 步，所以动画设置如下

这样就得到了一个无限循环的逐帧动画

这样下来，默认就不会动了，然后在hover的时候“运行”就行了