gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 21:13:12 25 4
gpt4 key购买 nike

所以,我遇到了这个问题,我无法在悬停时隐藏文本的相同位置显示文本。我是新手,所以请不要 mock 我的问题,我才刚刚开始学习 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 吗?如果是,请指导我。

最佳答案

使用display: none 将元素从 DOM 中完全移除,这样就不会影响其他元素的位置:

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

关于javascript - 隐藏文本并在悬停时显示其他一些文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44627999/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com