CSS悬停在整个表格行中创建热点

Question

我最近将鼠标悬停功能应用于一组按钮。 当应用到其他网站时，编码很好。 当应用于该站点时，链接/热点将转到下一个按钮。 例如：我有home / about / gallery / blog / prints / contact按钮，您会认为CSS样式表中设置的尺寸是该链接仅适用于这些尺寸。 没有这个。 链接/热点显示从表的边缘到主页按钮另一侧的链接到index.shtml的链接。 按钮之间有空格，但链接/热点在该空间中的距离为50％，直到命中下一个按钮链接/热点。 最后一个按钮“接触”跨到桌子的另一边。 关于我在做什么错的任何线索？

CSS：

div.nav-home {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 130px;
Margin-right: -60px;
background-position: right top;
background-repeat: no-repeat;
width: 75px;
height: 64px;
}
#home {
background-image: url('img/home.png');
}
#home:hover {
background-image: url('img/home_hover.png');
}

Index.shtml：

<table width="1213" height="64" align="center" background="img/tablebg2.png">
<!--#include file="menubuttons.html" -->

menubuttons.html：

<tr>    
<td align="center" width="75">
    <a href="/index.shtml" title="HOME" ><div id="home" class="nav-home"></div></a>
</td>

<td align="center" width="86">
    <a href="/about.shtml" title="ABOUT" ><div id="about" class="nav-about"></div></a>
</td>

<td align="center" width="94">
    <a href="/gallery.shtml" title="GALLERY" ><div id="gallery" class="nav-gallery">
</div></a>
</td>   

<td align="center" width="63">
    <a href="/blog.shtml" title="BLOG" ><div id="blog" class="nav-blog"></div></a>
</td>   

<td align="center" width="85">
    <a href="/prints.shtml" title="PRINTS" ><div id="prints" class="nav-prints"> 
 </div></a>
</td>

<td align="center" width="103">
    <a href="/contact.shtml" title="CONTACT" ><div id="contact" class="nav-contact">
</div></a>
</td>   
</tr> 

修正：（也许不正确吗？）

我只编写了2个月的代码，并且对如何写出一个很好的主意，但我不知道诸如DIV标签之类的一切含义。 我知道我昨晚在这里搜索，我以为是将div放入TD中。

通过在每组按钮之间的第一个按钮之前和最后一个按钮之后添加几个spacer.png，我能够解决所有问题。 这也解决了我侧面的间距问题。

谢谢您的帮助。 我只是想找到一种简单的方法来使鼠标悬停时更改按钮。 这种方法是我昨晚在这里发现的第一个方法，现在正试图完善它。 我需要对无序列表进行一些研究，因为我听说这会使事情变得更简单...

这是链接（基于我最近完成的网站的后端）www.blackmarkettattoos.com/amysesco/index.shtml

Answer 1

我认为问题在于您正在使用DIV，这是表单元格内的容器标记，并且两者都应用了样式（以类的形式应用于DIV，以内联的形式应用于TD）。

通常，最好使用列表创建菜单，但是如果必须使用提供的代码，则尝试删除宽度：75px; 来自div.nav-home。

检查这两个链接，以了解如何使用列表创建CSS菜单：

• css.maxdesign.com.au
• 动态驱动器CSS库