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>
[可先修改部分代码再运行查看效果]
【编辑推荐】
- DIV CSS网页布局时合理架构CSS
- JavaScript动态创建div属性和样式
- SPAN元素和DIV元素的区别
- 技术分享 XHTML中如何引入五大CSS样式
- 探究CSS中border:none;与border:0;的区别
版权声明:
作者:后浪云
链接:https://www.idc.net/help/396988/
文章版权归作者所有,未经允许请勿转载。
THE END