我在网站上有三列,所有三列都有标题和相关的文字段落。有一个灰色框用作文本的背景,但我需要灰色框滑动并覆盖段落文本和列标题。
这是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;
}
答案 0 :(得分: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)。
答案 1 :(得分:0)
如果是背景图片,它会落在你放置的任何文字后面。你必须创建一个:悬停并移动背景的位置,使其驻留在文本所在的位置。问题在于你如何摆脱文本?除非你
,否则你不能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;
}
答案 2 :(得分: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;
}