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庫