隱藏文字並在懸停上顯示一些其他文字

所以，我遇到了這個問題，我無法在相同的位置顯示文本，我隱藏文字懸停。我是一個新手，所以請不要嘲笑我的問題，我剛開始學習引導。隱藏文字並在懸停上顯示一些其他文字

這裏是我的代碼： 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嗎？如果是的話，請指導我。

來源

2017-06-19 Lohitaksh Trehan

使用display: none從DOM完全刪除元素，所以它不會影響其他元素的位置：

#heading #two{ 
    display: none; 
} 
#heading:hover #one{ 
    display: none; 
} 
#heading:hover #two{ 
    display: block; 
}

來源

2017-06-19 10:23:49

是的，它表示等待5分鐘，在接受之前，我們可以添加轉換和轉換以顯示屬性嗎？ @Rax –

@LohitakshTrehan你想實現什麼？你想要元素淡入/淡出還是其他動畫？如果是這樣，你可以看到其他關於這個問題的答案，或者如果你願意的話可以發表另一個問題 –

如果vissible屬性設置爲隱藏，這意味着它是在主體元素，但只是不在屏幕上顯示，其具有，高度....等屬性適用於該元素。所以使用display：block或者none。

#heading #two{ 
    display: none; 
} 
#heading:hover #one{ 
    display: none; 
} 
#heading:hover #two{ 
    display: block; 
}

來源

2017-06-19 10:30:39

更改下面的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; 
}

或者，檢查this小提琴。

來源

2017-06-19 10:38:13

<!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>

希望，這能解決你的問題。

來源

2017-06-19 11:03:09

隱藏文字並在懸停上顯示一些其他文字

回答

相關問題