ホバーにテキストを隠して他のテキストを表示する

私はホバー上のテキストを隠している同じ位置にテキストを表示することができないので、この問題を抱えていました。私は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の助けを借りなければならないのですか？はいの場合は、私を案内してください。

出典

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何を達成したいですか？要素をフェードイン/アウトまたは他のアニメーションにしますか？もしそうなら、他のSOの答えを見ることができます。 –

vissible場合は、プロパティを、それはちょうどそれが体の要素であることを意味するが、画面には表示されませんが、height、....などのプロパティはその要素に適用されます。したがって、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

ホバーにテキストを隠して他のテキストを表示する

答えて

関連する問題