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生成的内容，你在''（没有）的内容周围创建一个框，但是这个元素仍然坚持盒子模型（类型），所以它可以得到像高度，宽度，位置，等

确保为图像容器指定宽度，以便可以使用overflow：hidden;属性。

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

1 个答案: