我想让图像外部的背景区域在鼠标悬停在图像上时改变颜色。我想要与我网站上帖子底部的“相关帖子”类似的结果。 IE。 http://www.livecrafteat.com/eat/chicken-and-stuffing-in-the-crockpot/
我正在使用一个文本小部件,最终想要一排 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;
}
最佳答案
只需在您的容器中使用“:hover”伪类。它可以与任何选择器结合使用,而不仅仅是与更常见的“a”标签选择器结合使用。
关于html - :hover for background area around an image,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11813572/