Hiding text and displaying some other text on hover
Question
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.
Here is my code: 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;
}
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? if yes, then please guide me.
4 answers
solution1
3 ACCPTED 2017-06-19 10:23:49
Use display: none to remove elements completely from DOM, so that it won't affect other elements' positions:
#heading #two{
display: none;
}
#heading:hover #one{
display: none;
}
#heading:hover #two{
display: block;
}
solution2
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. So use display: block or none.
#heading #two{
display: none;
}
#heading:hover #one{
display: none;
}
#heading:hover #two{
display: block;
}
solution3
0 2017-06-19 10:38:13
Change following css and try,
#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;
}
Or, check this fiddle.
solution4
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.