您现在的位置是:首页 >>JsJs

this.className的使用,onMouseOver与onMouseOut事件处理器,分别代表鼠标移上去和鼠标移开时触发。

zhang2020-12-23 09:22:26【Js】人已围观

简介:
onMouseOver与onMouseOut事件处理器,分别对应为鼠标移上去和鼠标移开时触发。onMouseOver="this.className='parentOn'" 是鼠标移到该单元格上去时应...

onMouseOver与onMouseOut事件处理器,分别对应为鼠标移上去和鼠标移开时触发。


onMouseOver="this.className='parentOn'" 是鼠标移到该单元格上去时应用的css样式为“.parentOn”的样式

onMouseOut="this.className='parent'" 是鼠标离开单元格后应用的css样式为“.parent”的样式

如果你有源代码,在源代码css样式中你会看到有.parent与.parentOn的样式


this.className 必须是这样的,N不能为小写,必须为大写。

className 就是指的是你的css样式名

通过document.getElementByIdx_x或者是document.getElementByName得到某个控件对象就可以点className="cName"去设置样式,其cName是已经封装好的CSS名



代码演示:

<div id="navigation">
<ul>
<li class="first"><a href="{cxcms:path}/">首页</a></li>
<li class="parent" onMouseOver="this.className='parentOn'" onMouseOut="this.className='parent'"><a>产品介绍</a>
<ul>
{cxcms:navlist sort=2}
<li><a href="[navlist:link]">[navlist:name]</a></li>
{/cxcms:navlist}
</ul></li>
<li><a href="{cxcms:type sort=3}[type:link]{/cxcms:type}">合作伴伙</a></li>
<li><a href="{cxcms:type sort=4}[type:link]{/cxcms:type}">关于Ducky</a></li>
<li><a href="{cxcms:type sort=5}[type:link]{/cxcms:type}">Q & A</a></li>
<li><a href="{cxcms:type sort=6}[type:link]{/cxcms:type}">固件更新</a></li>
<li class="last"><a href="{cxcms:type sort=7}[type:link]{/cxcms:type}">保修须知</a></li>
</ul>
</div>


效果演示:




上一篇:网页自动跳转

下一篇:没有了!

文章评论

    评论加载中...

标签云

站点信息

  • 建站时间:2018-11-17
  • 文章统计:98篇文章
  • 微信交流:扫描二维码,添加我
在线客服
在线客服
在线咨询:
点击这里给我发消息技术交流
点击这里给我发消息技术交流
点击这里给我发消息技术交流
电话咨询:
(微信同步)
15629136039
微信公众号