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>

:hover版本:CSS1/CSS2 兼容性:IE4+ NS4+

语法:

Selector : hover { sRules }

说明:

设置对象在其鼠标悬停时的样式。

在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象,此伪类不发生作用。

在CSS2中此伪类可以应用于任何对象。

示例:

a:hover { font-size: 14pttext-decoration: underlinecolor: blue}

a:hover span{ color:red}

示例如下:

a.demo{background:#F0EBD6padding:8pxwidth:240pxtext-decoration:nonecolor:#000000}

a.demo:hover{background:#FFC080color:#000000}

a.demo:active{background:#CCCFFFcolor:#000000}

a.demo:visited{background:#FF3300color:#000000}

#idCodeDiv{width:100%padding:4pxfont-family:verdana,tahomamargin:12px 0px 0px 0pxbackground-color:#EEEEEEfont-weight:bold}

With a hush upon the marsh , the afternoon slid . Into the late, immobile period, The sun glazing the reeds and coating the limestone quarry as I, in repose With the marsh, bathed in solitude and splendor.

建议你到网上下一本 css中文手册 万事Ok

单纯只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:#00F text-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模块还没有开放