a:将鼠标悬停在图像周围的背景区域

时间:2012-08-05 02:43:03

标签: html css background hover

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

5 个答案:

答案 0 :(得分:0)

.pop-posts-left:hover { background: green; }应该有效(例如)。如果你想悬停在一个元素上影响另一个元素,你可能需要jQuery。

答案 1 :(得分:0)

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

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

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

答案 2 :(得分: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;
}

答案 3 :(得分:0)

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

为了解决这个问题,只需添加以下内容,看看会发生什么:

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

答案 4 :(得分:0)

你的html实际上是完全无效的。

  • 你必须在里面放一个
  • 应该只包含,否则就像你在做什么
  • 有一段时间你从未打开它

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

之后悬停效果应该很容易,只需要像@ChrisClower建议那样做