H I O X INDIA
免费的CSS教程
 首页   ||  教程  ||  脚本  || 支持 english Español Français Deutsch

的CSS话题
导言
类型
背景属性
文本属性
字体属性
盒子属性
边界属性
保证金属性
填充属性
专题
请询问您的疑问
反馈



onMouseOver效果


主题

如何产生onMouseover效果?
当鼠标在链接或者背景上时,如何让它们的颜色发生改变?



题目

属性: onMouseOver效果


文本效果:

例如:hioxindia.com

实现这一功能是非常简单的。根据以下的步骤,你也可以完成。

步骤1:
在head段落中添加文本要改变的样式,具体如下,
<head>
<style>
/*这是怎样的文字会在鼠标滑过*/
.colc{
font-family: san-serif;
color: #9EFF36;
}

/*这是如何看待文本将鼠标。注意:"悬停"是最最重要的变化这里*/
.colc:hover
{
font-family: san-serif;
color: #456745;
}
</style>
</head>


步骤2:
当鼠标在文本上方时,设置文本要出现的样式
例如:
<a href="" class="colc"> 这是将鼠标移动到文字</a>

注意:在这里我们使用标记"class"来设置样式。样式名称"将创建在header段落中。

-----------------------------

要让背景颜色发生改变,就像上面解释的一样,在样式标记中添加"background-color"属性。
例如:形成的样式就是
.colc2{
font-family: san-serif;
color: #9EFF36;
}

/*这是如何看待文本将鼠标。注意:"悬停"是最最重要的变化这里*/
.colc2:hover
{
background-color: #245250;
}


把这种样式设置到html标记中
<a href="" class="colc2"> 这是OnMouseOver效应 </a>





一个注记
的CSS -层叠样式表可以用来与HTML标记的解释这个网站。 这简单的CSS将帮助您创建更优雅和简洁的HTML网页。 这并不需要任何额外的软件或编码。 所有网络浏览器能够处理的CSS代码。

注2 :如果需要,您可以使用不是
标签。 DIV标记将开始和结束在新的行。跨度不会超过标签领域。


privacy policy     license
© 2004-2005 HIOX INDIA - hioxindia.com