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悬停在整个表行中创建热点

1 个答案: