CSS Expression 功能探索
本文通过两个示例展示了 CSS 中 expression() 的强大功能，利用这一特性可以实现鼠标悬停时改变元素颜色及提示文字的效果。文章提供了两种实现方式：直接在样式中编写 JavaScript 函数与外部定义函数并调用。
css的强大功能之代表expression()
1.先看看其强大功能
<style type="text/css">
.mycss
{
color:red;
cursor:default;
anyName:expression(
onmousemove=function(){this.style.color="blue";titleDiv.innerHTML='mouseover';},
onmouseout=function(){this.style.color="red";titleDiv.innerHTML='mouseout';}
)
}
</style>
.mycss
{
color:red;
cursor:default;
anyName:expression(
onmousemove=function(){this.style.color="blue";titleDiv.innerHTML='mouseover';},
onmouseout=function(){this.style.color="red";titleDiv.innerHTML='mouseout';}
)
}
</style>
<body>
<input type="text" value="move mouse here" class="mycss"/>
<div id="titleDiv"></div>
</body>
再试下面的方式
<script language="javascript">
function hOver(obj)
{
obj.style.color="blue";
titleDiv.innerHTML="mouseover";
}
function hOut(obj)
{
obj.style.color="white";
titleDiv.innerHTML="mouseout";
}
</script>
<style type="text/css">
.mycss
{
color:red;
cursor:default;
anyName:expression(onmouseover=function(){hOver(this);},onmouseout=function(){hOut(this);})
}
</style>
function hOver(obj)
{
obj.style.color="blue";
titleDiv.innerHTML="mouseover";
}
function hOut(obj)
{
obj.style.color="white";
titleDiv.innerHTML="mouseout";
}
</script>
<style type="text/css">
.mycss
{
color:red;
cursor:default;
anyName:expression(onmouseover=function(){hOver(this);},onmouseout=function(){hOut(this);})
}
</style>
<body>
<input type="text" value="move mouse here" class="mycss"/>
<div id="titleDiv"></div>
</body>
扫一扫
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
