在單元表中覆蓋圖像覆蓋以前的單元格圖像 - 重複表格中的圖像

我試圖在每個表格單元格中使用超鏈接製作翻轉圖像，但由於某些原因，我製作的每個後續單元格都覆蓋了單元格之前的它：。每個細胞變成重複的圖像。代碼在我第一次編寫時運行良好;這完全是出於藍色。以下是兩個相鄰單元格的圖像代碼 - 出於某種原因，我發生了什麼，第二單元格也一直顯示爲第一單元格圖像。在單元表中覆蓋圖像覆蓋以前的單元格圖像 - 重複表格中的圖像

<table style="width: 655px; height: 630px; border: 2px dotted black;"> 
<tbody> 
<tr align="center">  
<td style="border: 2px dotted black; width: 220px; height: 210px;"> <style type="text/css"> 
.rollover a {display: block; 
    width: 210px; 
    height: 155px; 
    background-image: url(IMG1a);} 
.rollover a:hover{display: block; 
    width:210px; 
    height: 155px; 
    background-image: url(IMG1b);} 
</style><div class="rollover"> <a href="link1"></a></div></td> 

<td style="border: 2px dotted black; width: 220px; height: 210px;"> <style type="text/css"> 
.rollover a {display: block; 
    width: 210px; 
    height: 155px; 
    background-image: url(IMG1a);} 
.rollover a:hover{display: block; 
    width:210px; 
    height: 155px; 
    background-image: url(IMG1b);} 
</style><div class="rollover"> <a href="link1"></a></div></td></tr></tbody></table>

來源

2012-11-08 user1809757

你能發佈完整的相關HTML嗎？ –

我將它改爲包含表格HTML！這有幫助嗎？ – user1809757

沒有更大的HTML塊我假設你有這個在你的頁面逐字。 <style>元素沒有作用於頁面的一部分。所以如果你在頁面中有這兩個樣式元素，最後一個語句將覆蓋第一個並影響這兩個div。

要解決這個問題，你必須給每個div或a一個特定的選擇，像一個id：

<style type="text/css"> 
#first-div.rollover a {display: block; 
    width: 210px; 
    height: 155px; 
    background-image: url(IMG1a);} 
#first-div.rollover a:hover{ 
    background-image: url(IMG1b);} 

#second-div.rollover a {display: block; 
    width: 185px; 
    height: 131px; 
    background-image: url(IMG2a);} 
#second-div.rollover a:hover{ 
    background-image: url(IMGb);} 
</style> 

<div class="rollover" id="first-div"> 
    <a href="link1"></a> 
</div> 
<div class="rollover" id="second-div"> 
    <a href="link2"></a> 
</div>

和往常一樣，包括你的<style>在<head>標籤，甚至更好在一個單獨的文件！

來源

2012-11-08 16:13:38

非常感謝，完美的作品！ – user1809757

很高興聽到！ –

在單元表中覆蓋圖像覆蓋以前的單元格圖像 - 重複表格中的圖像

回答

相關問題