a：懸停在圖像周圍的背景區域

我想在懸停時在圖像更改顏色的外部附近製作背景區域。我希望得到與我網站上帖子底部的「相關帖子」類似的結果。即 http://www.livecrafteat.com/eat/chicken-and-stuffing-in-the-crockpot/a：懸停在圖像周圍的背景區域

我正在使用一個文本小部件，並最終需要一行2個相同大小的圖像，當它們懸停時，我的帖子底部有像YARR插件那樣的背景變化。我將有6行這種表格格式，並試圖設置它來儘可能乾淨地控制它們。我試圖設置下面的HTML和CSS分別使其工作，但我堅持 - 特別是在懸停部分。

HTML：

<div class="popular-posts"> 
      <tbody> 
       <tr> 
<div class="pop-posts-left" width="160px" height="160px"> 
        <td align="left" > 
<div class="pop-posts-image-left"><a href="http://www.livecrafteat.com/live/meal-planning-template/"> <img src="http://www.livecrafteat.com/wp-content/uploads/2012/08/menu-plan-sidebar-thumbnail-2.jpg" /> </a></div> 
</td> 
</div> 
<div class="pop-posts-right" width="160px" height="160px"> 
        <td align="right"> 
<div class="pop-posts-image-right"><a href="http://www.livecrafteat.com/live/meal-planning-template/"> <img src="http://www.livecrafteat.com/wp-content/uploads/2012/08/menu-plan-sidebar-thumbnail-2.jpg" /> </a></div> 
</td> 
</div> 
</tr> 
</tbody> 
</left> 
</div>

CSS：

.pop-posts-left { 
    background: red; 
    float: left; 
    padding: 10px 15px 10px 15px; 
    overflow: hidden; 
} 
.pop-posts-right { 
    float: right; 
    padding: 10px 15px 10px 15px; 
    background: orange; 
} 
.pop-posts-left a:hover { 
} 
.pop-posts-image-left a:hover { 
    background: green; 
}

來源

2012-08-05 dustinheap

只需在容器中使用「：hover」僞類即可。它可以與任何選擇器結合使用，不僅可以使用「a」標籤選擇器，這更常見。

例子：http://jsfiddle.net/davidbuzatto/pc78c/

採取這些文檔也看看：https://developer.mozilla.org/en-US/docs/CSS/:hover

來源

2012-08-05 02:50:37 davidbuzatto

我會在這裏迴應，但對所有......謝謝！首先在這裏發佈，並沒有期待這麼多的快速反應。因爲我是一個noob，所以我將不得不發佈我的其餘問題。簡單地添加：懸停使其工作如何我想要的。現在只需要清理我的黑客html。 – dustinheap 2012-08-05 03:21:40

尼斯達斯汀！歡迎您;） – davidbuzatto 2012-08-05 03:23:29

說太快了。它的工作很完美，但FF中的頂部/底部填充稍微偏離了一點。現在我有5px。但在FF中，頂部看起來更像2 o 3 px，底部像7或8。IE和Chrome在整個圖像周圍以完美的邊框完美呈現。作爲一個noob我在這裏看到了一些其他的答案如何解決這個問題，但我會如何做到這一點特定於我的代碼？有什麼我可以補充來解決這個問題嗎？提前致謝。 – dustinheap 2012-08-05 04:39:30

.pop-posts-left:hover { background: green; }應該工作（作爲一個例子）。如果你想懸停在一個元素上來影響另一個元素，你可能需要使用jQuery。

來源

2012-08-05 02:49:46 Kwon

這是你在找什麼http://jsfiddle.net/MFx5E/1/？

.pop-posts-left:hover { 
    background: green; 
} 
.pop-posts-image-left a:hover { 
    background: green; 
} 
.pop-posts-right:hover { 
    background: green; 
} 
.pop-posts-image-right a:hover { 
    background: green; 
}

來源

2012-08-05 02:51:57

的原因，爲什麼你沒有看到你.pop-posts-image-left a:hover定義的綠色background-color所引起的非透明JPG圖像。另外沒有添加一些填充到.pop-posts-image-left。

爲了想出解決辦法，只需添加以下內容，看看會發生什麼：

.pop-posts-image-left { 
    padding: 10px; 
}

來源

2012-08-05 02:52:44

你的HTML是actualy完全地無效。

你必須把一個內部的
應該只包含，不因爲你是做
存在的，而下面你從來沒有打開它

首先嚐試修復你的HTML，因爲這可能會弄亂你的結果。在W3C website驗證您的代碼也是一個好主意。

之後，懸停效果應該很容易，只是做一些像@ChrisClower建議

來源

2012-08-05 03:01:23 Pevara

a：懸停在圖像周圍的背景區域

回答

相關問題