Question

我非常擅长HTML和CSS，并一直在练习随机制作网站。我最近在编写最新网站时遇到了问题。我有3个盒子，当悬停在页面高度增长时，显示文字来描述图片。这下面有文字。我想要的是，一旦其中一个盒子悬停在上面，我想确保在悬停的盒子上看不到下面的文字。谁能告诉我怎么做？

这是我的代码

HTML

<div class="cont">
    <article class="art1">
        <h2>
            Buddy's Story and Finding His Father
        </h2><img class="pic1" src="1.jpg"><br>
        <br>
        Buddy is a Human Elf, he managed to find his way into santas sack and
        santa accidently took him back to lapland, where he had no choice but
        to become an Elf and make toys in Santas Grotto, but after the
        realisation, buddy tries to find his real dad.
    </article>
    <article class="art2">
        <h2>
            With The Help of a Friend...
        </h2><img class="pic2" src="3.jpg"><br>
        <br>
        Buddy is a Human Elf, he managed to find his way into santas sack and
        santa accidently took him back to lapland, where he had no choice but
        to become an Elf and make toys in Santas Grotto, but after the
        realisation, buddy tries to find his real dad.
    </article>
    <article class="art1">
        <h2 class="spirit">
            Can Buddy Bring Back the Christmas Spirit?
        </h2><img class="pic2" src="4.jpg"><br>
        <br>
        Buddy is a Human Elf, he managed to find his way into santas sack and
        santa accidently took him back to lapland, where he had no choice but
        to become an Elf and make toys in Santas Grotto, but after the
        realisation, buddy tries to find his real dad.
    </article>
    <aside class="artbot">
        <p class="artbot">
            Buddy was a baby in an orphanage who stowed away in Santa's sack
            and ended up at the North Pole. Later, as an adult human who
            happened to be raised by elves, Santa allows him to go to New York
            City to find his birth father, Walter Hobbs. Hobbs, on
            <span>Santa's naughty list for being a heartless jerk, had no idea
            that Buddy was even born. Buddy, meanwhile, experiences the
            delights of New York City (and human culture) as only an elf can.
            When Walter's relationship with Buddy interferes with his job, he
            is forced to reevaluate his priorities.</span>
        </p>
    </aside>
</div>

CSS

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
}

Answer 1

将article元素设置为相对位置，并为它们设置高z-index值。

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

演示http://jsfiddle.net/gaby/73wmR/ 全屏：http://jsfiddle.net/gaby/73wmR/show/

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

1 个答案: