Question

我正在尝试添加一个“阴影”，当用户将鼠标悬停在图像上时会出现在图像上，但我似乎无法让它工作。当我运行我目前所拥有的，阴影填充整个帖子区域，而不仅仅是我想要的那个。

有人可以帮忙吗？感谢。

这是加载帖子的HTML和我设置的.shade div的css：

.shade {
  background-color: rgba(000, 000, 000, 0);
  transition: background-color .7s linear;
  -webkit-transition: background-color .7s linear;
  -o-transition: background-color .7s linear;
  -moz-transition: background-color .7s linear;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

div.entry:hover div.shade {
  background-color: rgba(000, 000, 000, .5);
}

<div <?php post_class() ?> class="post" id="post-<?php the_ID(); ?>">
  <a href="<?php the_permalink() ?>">
    <h2><?php the_title(); ?></h2>
    <div class="entry">
      <?php the_content(); ?>
      <div class="shade"></div>
    </div>
  </a>
</div>

哇。我刚刚解决了这个问题，它比我想象的容易得多，尽管我并没有真正按照我的意思去做。我只是让post div在悬停时变为50％不透明度。

Answer 1

您需要为.shade指定高度/宽度以匹配容器图像的高度/宽度（.entry）。由于div是空的，它将在一个px行中，如果它是绝对的，它只需要1个像素。

同时将position: relative设为.entry

在wordpress帖子中的图像上方添加“阴影”

1 个答案: