所以,我遇到了这个问题,我无法在相同的位置显示文本,我隐藏文字悬停。我是一个新手,所以请不要嘲笑我的问题,我刚开始学习引导。隐藏文字并在悬停上显示一些其他文字
这里是我的代码: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<title>BOOTProf</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container-fluid" style="background-color: deepskyblue;height: 200px;">
<div id="heading" class="row align-items-center" style="height: 200px;">
<div id="one" class="col align-self-center" style="background-color: aquamarine;text-align: center;">
<p class="one">CODING BLOCKS</p>
</div>
<div id="two" class="col align-self-center" style="background-color: aquamarine;text-align: center;">
<p class="two">Come Fall in Love With Coding...</p>
</div>
</div>
</div>
CSS:
#heading {
font-size:450%;
font-family:Pacifico,cursive;
color:#fc4c4f;
margin:0;
}
#heading #two{
visibility: hidden;
}
#heading:hover #one{
visibility: hidden;
}
#heading:hover #two{
visibility: visible;
}
的,事情是,我想显示在中心文字,但什么情况是,无论是文本即使它们中的任何一个都隐藏起来,它们也会在页面上占用空间,我希望它们在页面上占据相同的位置,并且在隐藏时不会占用额外的列。
我需要帮助JS吗?如果是的话,请指导我。
是的,它表示等待5分钟,在接受之前,我们可以添加转换和转换以显示属性吗? @Rax –
@LohitakshTrehan你想实现什么?你想要元素淡入/淡出还是其他动画?如果是这样,你可以看到其他关于这个问题的答案,或者如果你愿意的话可以发表另一个问题 –