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

Question

我最近将悬停功能应用于一组按钮。当应用于不同的网站时，编码很好。当应用于此站点时，链接/热点将转到下一个按钮。例如:我有按钮 home/about/gallery/blog/prints/contact 并且您会认为在 CSS 样式表中设置的维度链接将仅适用于这些维度。不是这个。链接/热点显示从表格边缘到主页按钮另一侧的 index.shtml 链接。按钮之间有空格，但链接/热点在空间中移动 50%，直到它点击下一个按钮链接/热点。最后一个按钮“接触”跨越到 table 的另一边。关于我做错了什么的任何线索？

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');
}

索引.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.blackmarkettatoos.com/amysesco/index.shtml

Answer 1

我认为问题在于您正在使用 DIV，它是表格单元格内的容器标记，并且您应用样式(作为类的 DIV 和作为内联的 TD)。

一般情况下，用列表创建菜单比较好，但是如果你必须使用你提供的代码，那就尽量去掉width: 75px;来自 div.nav-home。

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

• > css.maxdesign.com.au
• > Dynamic Drive CSS Library