mouseout FadeOut麻烦没有应用JavaScript / jQuery

时间:2013-02-05 03:55:24

标签: javascript html css css-transitions

这可能是什么问题?在鼠标悬停鼠标时,在产品选项卡上?因为我要 我的鼠标悬停菜单,当文本淡出的过渡时,flateout也是如此,请帮助,谢谢:)这是我观察的网站

cann.net78.net

顺便说一下这是代码

<head>
<style type="text/css">
body{font-family:HelveticaLTStd-Light;}
table{font-size:80%}
a{color:#f0f0f0;text-decoration:none;
-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}
a:hover{color:#006600;}
font-family:HelveticaLTStd-Light;
td.menu{background:#DEB887}
table.menu
{
font-size:100%;
color:#f0f0f0;
position:absolute;
visibility:hidden;
background:#558800;
opacity:0.9;
}
body {
background:url(wall.jpg) no-repeat fixed center;
}
table
{
border-collapse:collapse;
}
table, td, th
{
position:relative;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>

<body>
<div id="header">
<br>
<br><table border="0" align="center">
<tr>
    <th align="left" width="430"><font color="cccccc" face="HelveticaLTStd-Light" size="15">C-Ann Trading</font><br>
    <font color="#f0f0f0" size="5">and Computer Services    </font> </th>
    <th width="120" style="border-right:1px solid #000000;border-color:#cccccc"><br><font size="3"><a href="index.html">Home</a></font></th>
    <th width="120" style="border-right:1px solid #000000;border-color:#cccccc"><br><font size="3"><a href="about.htm">About Us</a></font></th>
    <th width="120" onmouseover="showmenu('products')" onmouseout="hidemenu('products')" style="border-right:1px solid #000000;border-color:#cccccc"><br><font size="3" color="#f0f0f0">Products</font>
        <table border="1" class="menu" id="products" width="150">
        <tr><th align="left" class="menu"><a href="notebook.htm">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspNotebooks</a></tr></th>
        <tr><th align="left" class="menu"><a href="monitor.htm">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspMonitors</a></tr></th>
        <tr><th align="left" class="menu"><a href="component.htm">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspComponents</a></tr></th>
        <tr><th align="left" class="menu"><a href="software.htm">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspSoftwares</a></tr></th>
        <tr><th align="left" class="menu"><a href="peripheral.htm">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspPeripherals</a></tr></th>
        <tr><th align="left" class="menu"><a href="network.htm">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspNetworking</a></tr></th>
        <tr><th align="left" class="menu"><a href="storage.htm">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspStorage Devices</a></tr></th>

1 个答案:

答案 0 :(得分:0)

老实说,请停止使用<table>来执行此类下拉菜单。使用嵌套的<ul><li>标记,并给出纯粹的css解决方案。

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

如果我可以,并且从我所看到的网站的源代码,也许您应该从头开始重新考虑html是一种语义标记语言,帮助(人和机器人)识别您的内容。

尝试考虑你的内容,好像你正在写一本书,一个标题,一个摘要,一些段落......等等。

为了一个简单的开始,请充分利用它:http://www.w3schools.com/html/html_basic.asp

你可能会发现乍看之下更加困难,但是你会增加你的技能,你也会赢得一些你认为有用的seo等级。