隐藏文字并在悬停时显示其他文字
[英]Hiding text and displaying some other text on hover
问题描述
So, i was having this problem, that i am not able to display text at same position,where i am hiding the text on hover. 
因此，我遇到了这个问题，即我无法在悬停时将文本隐藏在同一位置的位置显示文本。 I AM A NEWBIE, so please dont mock my question, i have just started learning bootstrap. 我是NEWBIE，所以请不要嘲笑我的问题，我刚刚开始学习引导程序。
Here is my code: html: 这是我的代码：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: 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;
}
The, thing is that i want to display both text in center, but whats happening is that both the text are taking space each on page even when any of them is hidden or not, I want them to take same place on page and dont take extra columns while they are hidden. 的问题是，我想在中间显示两个文本，但是发生的事情是，即使隐藏或不隐藏两个文本，每个文本在页面上也都占用空间，我希望它们在页面上占据相同的位置，而不占用隐藏多余的列。
Do i have to take help of JS? 我需要接受JS的帮助吗？ if yes, then please guide me. 如果是，那么请指导我。
4 个解决方案
解决方案1
3 已采纳 2017-06-19 10:23:49
Use display: none to remove elements completely from DOM, so that it won't affect other elements' positions: 使用display: none可以从DOM中完全删除元素，从而不会影响其他元素的位置：
#heading #two{
display: none;
}
#heading:hover #one{
display: none;
}
#heading:hover #two{
display: block;
}
解决方案2
1 2017-06-19 10:30:39
If vissible property set to hidden, it means it is element in body but just not apper in screen, its with , height ....etc properties apply to that element. 如果将vissible属性设置为hidden，则意味着它是正文中的元素，但不是屏幕上的apper ，它的with，height .... etc属性适用于该元素。 So use display: block or none. 因此，请使用display：block或none。
#heading #two{
display: none;
}
#heading:hover #one{
display: none;
}
#heading:hover #two{
display: block;
}
解决方案3
0 2017-06-19 10:38:13
Change following css and try, 更改以下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;
position: absolute;
}
解决方案4
0 2017-06-19 11:03:09
<!DOCTYPE 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;" id="heading"> <div id="one" class="col " style="background-color: aquamarine;text-align: center;"> CODING BLOCKS </div> <div id="two" class="col" style="background-color: aquamarine;text-align: center;"> Come Fall in Love With Coding... </div> </div> <style> #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; } </style>
Hope, this solves your question. 希望这能解决您的问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.