隱藏文字並在懸停時顯示其他文字
[英]Hiding text and displaying some other text on hover
問題描述
因此，我遇到了這個問題，即我無法在懸停時將文本隱藏在同一位置的位置顯示文本。 我是NEWBIE，所以請不要嘲笑我的問題，我剛剛開始學習引導程序。
這是我的代碼：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的幫助嗎？ 如果是，那么請指導我。
4 個解決方案
解決方案1
3 已采納 2017-06-19 10:23:49
使用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
如果將vissible屬性設置為hidden，則意味着它是正文中的元素，但不是屏幕上的apper ，它的with，height .... etc屬性適用於該元素。 因此，請使用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
更改以下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>
希望這能解決您的問題。
hover 覆蓋文本以顯示其他文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.