Html 如何在悬停阶段使文本不可见

我对HTML和CSS非常陌生，并且一直在练习在随机事物上创建网站。我最近在编写我的最新网站时遇到了一个问题。我有3个框，当鼠标悬停时，这些框会沿着页面向下增长，以显示描述图片的文本。下面是文本。我要尝试的是，一旦其中一个框悬停在上方，我想确保在悬停的框上方看不到下面的文本。有人能告诉我怎么做吗

这是我的密码

HTML

---

将

文章

元素设置为相对位置，并为其设置较高的

z索引

值

article{
    position:relative;
    z-index:100;
}

演示于

---

全屏显示：

您知道吗？这是一个很有用的平台，可以为想法提供原型，并使我们更容易提供帮助：）记住也要使用

转换持续时间：2s

在所有供应商前缀之后，如

-moz转换持续时间：2s以确保所有有能力的浏览器都支持此转换。嗨，山姆，是的，我知道，但这更多是一个实践网站，因此在我的默认浏览器firefox中不需要它们。我可以在将来使用它，Jaime，我将如何为您的利益使用它？嗨，这正是我想要的，谢谢。我理解z索引的目的，但相对定位对这个特定问题起作用的原因是什么？需要对元素进行定位，才能考虑
z索引
。看到了吗，如果z-index是绝对定位的，那么它就没有价值了？例如，它会。。任何类型的定位（除了默认的
静态
）都可以。啊，我以前用z-index尝试过，但没有意识到我必须更改位置类型，所以不起作用。谢谢你！
body {
    margin:10px auto;
    width:70%;
    paddding:0;
    background-image:url(bgg.jpg);
    max-width:1000px
}

header {
    background-image:url(banner.png);
    background-repeat:no-repeat;
    border-radius:20px;
    height:200px
}

.title {
    height:180px;
    width:180px;
    margin-left:40%;
    margin-top:10px
}

.tagline {
    z-index:1;
    position:relative;
    bottom:95px;
    color:#fff;
    font-weight:900;
    font-size:40px;
    text-align:center;
    color:#000;
    font-family:Tw Cen MT;
    letter-spacing:5px
}

.snow {
    width:100%;
    max-height:100px;
    z-index:-1;
    border-radius:20px
}

.cont {
    width:100%;
    height:560px;
/*background-color:rgb(44,132,255);*/
    background:-moz-linear-gradient(#247cfa 60%,white);
    border-radius:20px;
    position:relative
}

.pic {
    max-height:600px;
    max-width:900px;
    border-radius:30px;
    min-height:600px;
    min-width:900px
}

article {
    border-radius:30px;
    margin-bottom:20px
}

nav {
    width:100%;
    margin-top:-17px;
    margin-left:auto;
    margin-right:auto;
    background-color:#d61415;
    height:60px;
    border-radius:10px
}

nav ul li {
    float:left;
    padding:0 95px;
    list-style:none;
    color:#fff;
    margin-top:13px;
    font-family:Tw Cen MT;
    font-weight:700;
    font-size:2em;
    transition:color .5s linear 0
}

nav ul li:nth-child(1) {
    border-right:1px solid #fff
}

nav ul li:nth-child(2) {
    border-right:1px solid #fff
}

nav ul li:hover {
    color:#90ee90
}

article {
    width:29%;
    height:325px;
    display:inline;
    float:left;
    padding:15px;
    color:transparent;
    font-family:Tw Cen MT;
    margin-left:8px;
    -moz-transition-duration:2s;
    max-height:500px;
    color:transparent
}

.art1 {
    background-color:green
}

.art2 {
    background-color:#d61415
}

.art1,.art2 {
    margin-top:10px
}

.pic1 {
    width:274px;
    height:246px;
    border-radius:10px;
    margin-top:-10px;
    border:2px solid #fff
}

.pic2 {
    width:274px;
    height:246px;
    border-radius:10px;
    margin-top:-10px;
    border:2px solid #fff
}

.pic3 {
    width:274px;
    height:246px;
    border-radius:10px;
    margin-top:-10px;
    border:2px solid #fff
}

h2 {
    padding:10px;
    margin-top:-10px;
    color:#fff
}

article:hover {
    height:500px;
    width:29%;
    display:inline;
    float:left;
    padding:15px;
    color:#fff;
    font-family:Tw Cen MT;
    margin-left:8px
}

footer {
    background-color:#247cfa;
    height:250px;
    width:100%;
    float:clear;
    border-radius:5px
}

h3 {
    position:absolute;
    top:700px
}

.footpic {
    float:left;
    width:100px;
    height:60px;
    padding:55px;
    margin-top:30px
}

#firstfootpic {
    margin-left:40px
}

aside.artbot {
    position:absolute;
    top:375px;
    left:0
}

p.artbot {
    color:red;
    width:70%;
    font-family:Tw Cen MT;
    margin:0 auto;
    font-size:1.25em;
    text-align:center
}

span {
    color:blue
}

.socialpics {
    width:80px;
    height:70px;
    margin-top:20px
}

article{
    position:relative;
    z-index:100;
}