0

我在一个网站上有三个栏目，所有三个栏目都有标题和相关的文本段落。有一个灰色框用作文本的背景，但我需要灰色框向上滑动并覆盖段落文本和列标题。

这是HTML：

<div class="row">
      <div class="span3 lower-columns" id="lower-col-left" style="padding-top:10px;">
        Rewards
        <p class="lower-col-text">placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text</p>
        </div>
      <div class="span3 lower-columns" id="lower-col-mid">
        Schedule an Installation
        <p class="lower-col-text" style="padding-top:30px;">placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text</p>
        </div>
      <div class="span3 lower-columns" id="lower-col-right" style="padding-top:10px;">
        Contact Us
        <p class="lower-col-text">placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text</p>
        </div>

     </div>

这是CSS：

.span3.lower-columns {
    height: 370px;
    text-align:center;
    width: 280px;
    margin-top: 40px;
    font-size: 28px;
    background-image: url('/img/lower-col-bg2.png');
    background-repeat: no-repeat;
    background-position-y: 70px;
    background-size: 290px 290px;

}

这是它的样子（非悬停）： 在此处输入图像描述

这是背景图片：

在此处输入图像描述

我宁愿只使用 CSS，但不反对使用 jQuery。

谢谢！！！！

编辑：我自己想通了，但它不会让我回答我自己的问题。如果有人想知道，这是 CSS：

.span3.lower-columns {
  height: 370px;
  text-align:center;
  width: 280px;
  margin-top: 40px;
  font-size: 28px;
  background-image: url('/img/lower-col-bg2.png');
  background-repeat: no-repeat;
  background-position-y: 70px;
  background-size: 290px 290px;
  position: relative;
}
 .span3.lower-columns:hover {
  background-position-y: 0px;
  transition: .65s;
}
4

3 回答 3

0

我自己想通了。如果有人想知道，这是 CSS：

.span3.lower-columns {
  height: 370px;
  text-align:center;
  width: 280px;
  margin-top: 40px;
  font-size: 28px;
  background-image: url('/img/lower-col-bg2.png');
  background-repeat: no-repeat;
  background-position-y: 70px;
  background-size: 290px 290px;
  position: relative;
}
 .span3.lower-columns:hover {
  background-position-y: 0px;
  transition: .65s;
}
于 2013-08-14T13:16:21.747 回答
0

只需使用：悬停。

.span3.lower-columns:hover {
  background-image: url('/img/lower-col-bg2.png');
  background-repeat: no-repeat;
  background-position-y: 0px;
}

当然，这是假设您希望它位于标题下方，而不是您想用灰色框隐藏文本和标题。如果你这样做（想用灰色框隐藏文本），你可以使用具有 z-index 属性的单独 img 元素或正确大小和颜色的伪元素（使用 :after）。

于 2013-07-22T15:27:59.197 回答
0

如果它是背景图像，它将位于您放置在其顶部的任何文本的后面。您必须创建一个 :hover 并移动背景的位置以使其位于文本所在的位置。那么问题就在于如何摆脱文本？你不能，除非你

a：制作一个删除文本的图像 b：在 div 中有一个可以使用 z-index 放置的图像

.span3.lower-columns:hover {
    height: 370px;
    text-align:center;
    width: 280px;
    margin-top: 40px;
    font-size: 28px;
    background-image: url('/img/lower-col-bg2.png');
    background-repeat: no-repeat;
    background-position-y: 00px;
    background-size: 290px 290px;

}
于 2013-07-22T15:28:21.290 回答