0

ここで、他の div が表示されているときに他の div 要素を非表示にすることに関する問題が発生しました。以下のコードでわかるように、f.ex. スタートレックは表示されていますが、z-index を使用してパシフィック リムとワールド ウォー Z を非表示にしたいと考えています。

私のHTMLコード:

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BluShop</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
    <header id="header">
        <h1>BluShop</h1>
    </header>

    <section id="leftContent">
        <div id="pacificrimContent">
            <h2>Pacific Rim</h2>
            <img alt="pacificrim image" src="../bilder/pacificRim.jpg">
            <p>Blahblahblah</p>
        </div>
        <div id="startrekContent">
            <h2>Star Trek</h2>
            <img alt="startrek image" src="../bilder/starTrek.jpg">
            <p>blahblahblah</p>
        </div>
        <div id="worldwarzContent">
            <h2>World War Z</h2>
            <img alt="worldwarz image" src="../bilder/worldWarZ.jpg">
            <p>blahblahblah</p>
        </div>
    </section>
    <aside id="rightContent">
        <div id="pacificrimPoster">
            <a href="#pacificrimContent"><img alt="pacificrim poster" src="../bilder/pacificRim.jpg"></a>
        </div>
        <div id="startrekPoster">
            <a href="#startrekContent"><img alt="startrek poster" src="../bilder/starTrek.jpg"></a>
        </div>
        <div id="worldwarzPoster">
            <a href="#worldwarzContent"><img alt="worldwarz poster" src="../bilder/worldWarZ.jpg"></a>
        </div>
    </aside>

    <footer id="footer">
    </footer>
</div>  
</body>
</html>

CSS コード

    @charset "utf-8";
/* CSS Document */

body{
    margin: 0;
    }

#container{
    width: 960px;
    height: 600px;
    margin: auto;
    background-color: rgb(78, 80, 85);
    border: solid 1px rgb(213, 214, 215);
    }

#header{
    height: 60px;
    background-color: rgb(66, 69, 74);
    margin-bottom: 10px;
    }   

#header h1{
    float: left;
    margin: 0px 10px 0px 10px;
    color: rgb(14, 177, 238);   
    }

#leftContent{
    float: left;
    position: relative;
    margin: 0px 10px 10px 10px;;
    height: 460px;
    width: 780px;
    background-color: rgb(230, 231, 232);
    }

#leftContent h2{
    font-size: 20px;
    margin: 10px 0px 0px 10px;
    }

#leftContent img{
    float: left;
    margin: 0px 20px 10px 10px;
    width: 310px;
    height: 420px;
    }

#leftContent p{
    margin: -4px 20px 10px 0px;
    }


#pacificrimContent, #startrekContent, #worldwarzContent{
    position: absolute;
    overflow: hidden;
    transition: height .5s ease-in;
    -webkit-transition: height .5s ease-in;
    -moz-transition: height .5s ease-in;
    }                   

#startrekContent, #worldwarzContent{
    z-index: -1;
    height: 0; 
    }

#rightContent{
    float: right;
    width: 140px;
    height: 460px;
    margin: 0px 10px 10px 10px;
    background-color: rgb(230, 231, 232);
    }   

#rightContent img{
    display: block;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px    
    }   

#pacificrimContent:target, #startrekContent:target, #worldwarzContent:target{
    height: 100%;
    z-index: 10;
    }

#footer{
    height: 60px;
    margin: 0;  
    background-color: rgb(16, 163, 210);
    clear: both;
    }

ご覧のとおり、パシフィック リムは、人々がウェブサイトを訪れたときに表示される標準的な映画であり、他の人をターゲットにしたときに表示される必要があります。次に、ターゲットのムービーが表示されるはずです。現在、パシフィック リムは常に他の映画の背景に表示されています。

だからもし私がf.ex。スタートレックの映画をターゲットにすることを選択し、次にワールド ウォー Z の映画をターゲットにすることを選択します。トランジションが機能しているときに、パシフィック リムの映画が後ろに表示されます。

私はJavaScriptを使用することを許可されていないので、これを機能させる方法はありますか? ありがとう！

jsfiddle.net/f8ns4 - 私の言いたいことを示すための JSFiddle!

4

1 に答える 1

0

個々のムービー div に背景色を付けて、その下にあるものが見えないようにします。

#pacificrimContent, #startrekContent, #worldwarzContent{
    position: absolute;
    overflow: hidden;
    transition: height .5s ease-in;
    -webkit-transition: height .5s ease-in;
    -moz-transition: height .5s ease-in;
    background-color: rgb(230, 231, 232);
}

デモ: http://jsfiddle.net/f8ns4/1/

于 2013-10-10T15:03:39.910 に答える