0

Web サイトに 3 つの列があり、3 つすべてにタイトルと関連するテキストの段落が含まれています。テキストの背景として使用されている灰色のボックスがありますが、グレーのボックスをスライドさせて段落テキストと列タイトルの両方を覆う必要があります。

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

:hover を使用するだけです。

.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: z-index を使用して配置できる画像を div に配置する

.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 に答える