1

当悬停在图像上时，我想让图像外部的背景区域改变颜色。我想要与我网站上帖子底部的“相关帖子”类似的结果。即 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;
}
4

5 回答 5

0

您的 html 实际上完全无效。

  • 你必须在里面放一个
  • 应该只包含，不，就像你正在做的那样
  • 在你从未打开它的时候，下面有一个

尝试先修复您的 html，因为这可能会弄乱您的结果。在W3C 网站 上验证您的代码也是一个好主意。

之后，悬停效果应该很容易，只需执行@ChrisClower 建议的操作

于 2012-08-05T03:01:23.020 回答
0

.pop-posts-left:hover { background: green; }应该工作（例如）。如果您想将鼠标悬停在一个元素上以影响另一个元素，您可能需要 jQuery。

于 2012-08-05T02:49:46.227 回答
0

只需在容器中使用 ":hover" 伪类。它可以与任何选择器一起使用，而不仅仅是与更常见的“a”标签选择器一起使用。

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

也看看这些文档：https ://developer.mozilla.org/en-US/docs/CSS/:hover

于 2012-08-05T02:50:37.237 回答
0

这是你要找的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-05T02:51:57.900 回答
0

原因，为什么你看不到你background-color定义的绿色.pop-posts-image-left a:hover是由于不透明的 jpg 图像造成的。另外没有添加一些填充到.pop-posts-image-left.

为了弄清楚这一点，只需添加以下内容，看看会发生什么：

.pop-posts-image-left {
    padding: 10px;
}
于 2012-08-05T02:52:44.720 回答