注册 | 登陆

您的位置：阿里西西 > 网页特效 > 导航菜单 > 详细内容

2顶

导航菜单鼠标经过变色效果

稿源：互联网 2022-06-19 02:39:03 点击： 1482 撤稿纠错

非常漂亮的导航菜单，鼠标经过颜色改变，可自定义。

以下讨论的是和相关的导航菜单鼠标经过变色效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<style type="text/css">
/* 先把这个 xmenu 的样式放到css里 */
.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}</style>
<script>
/* //欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。这是把事件动作绑定到菜单上的函数*/
function attachXMenu(objid){
 var tds=objid.getElementsByTagName('td');
 for(var i=0;i<tds.length;i++){  with(tds[i]){
  onmouseover=function(){    with(this){     filters[0].apply();     style.background='#66CCFF';
//这是鼠标移上去时的背景颜色
style.border='1px solid #ffffff'; //边框
style.color='black'; //文字颜色
filters[0].play();    }   }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
onmouseout=function(){    with(this){
filters[0].apply();
style.background='#336699'; //这是鼠标离开时的背景颜色
style.border='1px solid #336699'; //边框
style.color='#ffffff'; //文字颜色
filters[0].play();    }   }  } }}
</script>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。
<hr />
<table id="xmenu0" class="xmenu" border="0" cellspacing="4" cellpadding="1" width="500" bgcolor="#336699" align="center">    <tbody>        <tr>            <td onclick="location.href='http://www.zzjs.net';">点击我看看时候效果</td>            <td>zzjs.net</td>            <td>website</td>            <td>站长特效网</td>            <td>ok</td>            <td>good</td>        </tr>    </tbody></table>
<script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id
</script>




<table id="xmenu1" class="xmenu" border="0" cellspacing="4" cellpadding="1" width="100" bgcolor="#336699" align="center">    <tbody>        <tr>            <td>我的特效</td>        </tr>        <tr>            <td>website</td>        </tr>        <tr>            <td>Is</td>        </tr>        <tr>            <td>zzjs.net</td>        </tr>        <tr>            <td>welcome</td>        </tr>        <tr>            <td>站长特效</td>        </tr>    </tbody></table>
<script>attachXMenu(xmenu1);</script>

关于导航菜单鼠标经过变色效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016299762369.shtml方便下次再访问哦。

·上一篇： 内容过长出现省略号效果
·下一篇： li隔行换色的示例

相关阅读

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

最新游戏

更多 »

最新新闻

更多 »