Question

所以，我遇到了这个问题，我无法在同一位置显示文字，我在悬停时隐藏文字。我是一个新手，所以请不要嘲笑我的问题，我刚刚开始学习bootstrap。

这是我的代码： 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的帮助吗？如果有，那么请指导我。

Answer 1

使用display: none从DOM中完全删除元素，这样就不会影响其他元素＆＃39;的位置：

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

Answer 2

如果 vissible 属性设置为隐藏，则表示它是正文中的元素但在屏幕中不是apper，其with，height .... etc属性适用于该元素。所以使用display：block或none。

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

Answer 3

更改以下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小提琴。

Answer 4

＆＃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>

＆＃13;

希望，这解决了你的问题。

隐藏文本并在悬停时显示其他一些文本

4 个答案: