a：悬停在图像周围的背景区域

Posted 2023-05-08

【中文标题】a：悬停在图像周围的背景区域

【英文标题】：a:hover for background area around an image

【发布时间】：2012-08-02 13:20:25

【问题描述】：

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

【参考方案1】：

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

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

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

【讨论】：

我会在这里回复所有...谢谢！第一次在这里发帖，没想到这么多人的反应这么快。由于我是菜鸟，因此我将不得不发布其余的问题。只需添加 :hover 即可使其按我的意愿工作。现在只需清理我看起来很老套的 html。

说得太早了。它工作得很好，但 FF 中的顶部/底部填充有点偏离。现在我有它在5px。但在 FF 中，顶部看起来更像 2 o 3 px，底部看起来更像 7 或 8。IE 和 Chrome 完美呈现，整个图像周围有一个漂亮的均匀边框。作为一个菜鸟，我在这里看到了一些其他答案如何解决这个问题，但我将如何针对我的代码执行此操作？我可以添加一些东西来解决这个问题吗？提前致谢。

@Dustin：请为您的问题创建另一个问题。我认为如果你“重置”你的CSS。看看***.com/questions/11597674/…

【参考方案2】：

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

【参考方案3】：

这就是你要找的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;

【参考方案4】：

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

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

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

【参考方案5】：

您的 html 实际上完全无效。

你必须在一个里面放一个 应该只包含 , 不，就像你正在做的那样 下面有一个你从未打开过的地方

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

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