这篇文章主要讲解了“怎么用CSS编写脚本实现交互效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS编写脚本实现交互效果”吧！
如何在CSS中编写脚本实现交互效果？
我们浏览网页的时候，经常会碰到一些交互的效果。例如容器在鼠标移上去的时候，会发生一些变化。这些效果，可以用多种方法来实现。现在我们要解决的是如何在CSS中写脚本实现交互效果。
CSS代码如下：
ExampleSourceCode
event:expression( onmouseover=function() { this.style.backgroundColor='#ccc' this.style.border='1pxsolid#000' }, onmouseout=function() { this.style.backgroundColor='#f0f0f0' this.style.border='1pxsolid#c00' } )这段代码的意思是定义了鼠标的两种不同的状态，onmouseover、onmouseout，在两种不同的状态下，对元素应用不同的样式设置。这样就达到了我们想要的交互效果。
请看下面的实例：
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>www.mb5u.com</title> <styletypestyletype="text/css"> .show{ width:600px; height:58px; margin:50pxauto0auto; line-height:58px; border:1pxsolid#c00; background:#f0f0f0; text-align:center; /*mb5u提醒您重点注重查看下面的代码*/ event:expression( onmouseover=function() { this.style.backgroundColor='#ccc' this.style.border='1pxsolid#000' }, onmouseout=function() { this.style.backgroundColor='#f0f0f0' this.style.border='1pxsolid#c00' } ) } </style> </head> <body> <divclassdivclass="show">致力于Web标准在中国的应用及发展</div> </body> </html>[可先修改部分代码再运行查看效果]
感谢各位的阅读，以上就是“怎么用CSS编写脚本实现交互效果”的内容了，经过本文的学习后，相信大家对怎么用CSS编写脚本实现交互效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
