代码之家 › 专栏 › 技术社区 › FllnAngl

悬停时显示的文本,在转换完成后消失

hover css html

FllnAngl · 技术社区 · 8 年前

我正在制作一个带有图像的网站,在图像上悬停时,文本在图像中缓慢出现

但转换完成后,文本将消失并隐藏在图像后面,如下面的片段所示( 代码段导致HTML删除 ):

.keukens, .badkamers, .toiletten{
    position:relative;
    overflow:hidden;
    height:300px;
    padding:0;
}
.keukens:before{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: 0;
    background-color:red;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.badkamers:before{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: 0;
    background-color:red;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.toiletten:before{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: 0;
    background-color:red;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.container > .links > .keukens:hover .keukensText{
    opacity:1;
}

.container > .links > .badkamers:hover .badkamersText{
    opacity:1;
}

.container > .links > .toiletten:hover .toilettenText{
    opacity:1;
}

.keukensText, .badkamersText, .toilettenText{
    opacity:0;
    transition: all 0.5s;
}

.keukensText h2 span {
    color: black;
    font: bold 24px/45px Helvetica, Sans-Serif;
}

.badkamersText  h2 span {
    color: black;
    font: bold 24px/45px Helvetica, Sans-Serif;
}

.toilettenText h2 span {
    color: black;
    font: bold 24px/45px Helvetica, Sans-Serif;
}

<!--container-->
	<div id="container" class="container">
		<div class="links">
			<div class="col-sm-4 keukens">
				<div class="keukensText">
					<a href="keukens.html">
						<h2>
							<span>Keukens</span>
						</h2>
					</a>
				</div>
			</div>
      <br>
			<div class="col-sm-4 badkamers">
				<div class="badkamersText">
					<a href="badkamers.html">
						<h2>
							<span>Badkamers</span>
						</h2>
					</a>
				</div>
			</div>
      <br>
			<div class="col-sm-4 toiletten">
				<div class="toilettenText">
					<a href="toiletten.html">
						<h2>
							<span>Toiletten</span>
						</h2>
					</a>
				</div>
			</div>
		</div>
	</div>

有人能帮我吗?我已经在这个问题上纠结了很长一段时间,用谷歌搜索了很多问题,但我找不到任何答案。现在我担心这将是一个如此简单的解决方案,我看起来像个白痴

提前感谢您!

2 回复 | 直到 8 年前

Curt Husting 8 年前

您需要相对定位这3个元素 .keukensText, .badkamersText, .toilettenText 它应该会起作用

JPeG 8 年前

固定的您需要将文本类设置为“位置:绝对”

.keukens, .badkamers, .toiletten{
    position:relative;
    overflow:hidden;
    height:300px;
    padding:0;
}
.keukens a {
z-index: 40; 
}
.keukens:before{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: 0;
    background-color:red;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.badkamers:before{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: 0;
    background-color:red;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.toiletten:before{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: 0;
    background-color:red;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.keukens:hover .keukensText{
    opacity:1;
    z-index: 4; 
}

.badkamers:hover .badkamersText{
    opacity:1;
}

.toiletten:hover .toilettenText{
    opacity:1;
}

.keukensText, .badkamersText, .toilettenText{
    opacity:0;
    transition: all .5s;
    position: absolute; 
}

.keukensText h2 span {
    color: black;
z-index: 50; 
font: bold 24px/45px Helvetica, Sans-Serif;
}

.badkamersText  h2 span {
    color: black;
    font: bold 24px/45px Helvetica, Sans-Serif;
}

.toilettenText h2 span {
    color: black;
    font: bold 24px/45px Helvetica, Sans-Serif;
}

<!--container-->
	<div id="container" class="container">
		<div class="links">
			<div class="col-sm-4 keukens">
				<div class="keukensText">
					<a href="keukens.html">
						<h2>
							<span>Keukens</span>
						</h2>
					</a>
				</div>
			</div>
      <br>
			<div class="col-sm-4 badkamers">
				<div class="badkamersText">
					<a href="badkamers.html">
						<h2>
							<span>Badkamers</span>
						</h2>
					</a>
				</div>
			</div>
      <br>
			<div class="col-sm-4 toiletten">
				<div class="toilettenText">
					<a href="toiletten.html">
						<h2>
							<span>Toiletten</span>
						</h2>
					</a>
				</div>
			</div>
		</div>
	</div>