如何在悬停时同时突出显示文本和背景颜色？

Question

我正在尝试创建一个网格样式的投资组合页面，其中标题在悬停时突出显示。我还希望在图像上显示背景颜色。我已经创建了这两个，但无法弄清楚如何让它们同时发生。下面是 HTML 和 CSS 以及查看我的实际意思的链接。

.home_blog_box { position: relative; float: left; width: 287px; padding: 0 12px 12px 0; }
.home_blog_box img { width: 287px; height: 201px;  }
.home_blog_box h3 { position:absolute; width: 287px; height: 201px; bottom:3px; left:0px;}
.home_blog_box h3:hover {background-color: #777777; opacity:.85;}
.home_blog_box h3 a {opacity:0; color:#ffffff; text-decoration: none; font-size:30px;}
.home_blog_box h3 a:hover {opacity:1}


<div class="home_blog_box">
<?php } ?>
  <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('featured-blog'); ?></a>
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
</div><!--//home_blog_box-->  

谢谢！

Answer 1

您可以使用 :after 或 :before 伪元素很好地做到这一点：http://jsfiddle.net/TpfA8/

示例：

<div class="image-box">
  <img src="http://placehold.it/200x150" />
  <p>title</p>
</div>

和相关的css：

.image-box {
  position: relative;
  overflow: hidden;
  width: 200px;
}

.image-box:hover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(200,100,100, 0.5);
}

.image-box p {
  display: none;
}

.image-box:hover p {
 display: block;
  position: absolute;
  top: 10px;
  left; 10px;
}

使用 CSS 生成的内容，您正在围绕 '' 的内容（无）创建一个框，但该元素仍然遵循框模型（有点），因此它可以获取诸如高度、宽度、位置、等等

确保为您的图像容器指定宽度，以便您可以使用溢出：隐藏；属性。