1

それで最近別の投稿をしましたが、それは明確に答えられたと感じました。ここにリンク（以前の投稿）があり、それは私が知りたいことを説明して達成しますが、それは私にとって新しい問題を生み出しました。そのため、この特定の質問に対して新しい投稿を作成するのが最善だと思いました。
私の質問は、navmenuを作成し、そこにリンクがあると、クリックするとdivセクションが表示されるということです。そのセクションにサムネイル画像があります。クリックすると横に大きな画像が表示されるようにクリック可能にしたいです。ホバーを使用してこれを行うことはできますが、ユーザーがサムネイルをクリックしたい場合は、ホバー（大きな画像）をそのままにしておくこともできます。ユーザーが画像のフル解像度を見たい場合は、大きな画像の説明にもアンカーがあります。問題は、サムネイルをクリックすると、Divセクション全体が消えてしまうことです...これは奇妙なことです。これが私の言いたいことを示すビデオです。ダミーページにどのように表示するかについてのコードもここにあります。

これが私のfiddle

私はhtmlとcssを初めて使用し、ポートフォリオサイトをこれら2つの言語で作成したいと考えていることを覚えておいてください。cssとhtmlをよりよく理解して理解できたら、後でjavascriptに移行します。これを3週間以上行っています。このすべてを読み、潜在的に助けてくれてありがとう。

4

1 に答える 1

1

ねえ今、あなたはそれに慣れることができcheck box、それが可能であるよりも

私が作成したこのデモを確認してください http://jsfiddle.net/n6f4Y/1/

HTML

<div id="container">

<h1>Welcome to Erimagination!</h1>
<hr id="top_hr">

<ul id="navmenu">

    <!-- This is my PORTFOLIO section -->
    <li>
        <input type="checkbox" id="portfolio"/>
        <label for="portfolio">Portfolio</label>
        <span class="des_am"><h3>Latest Work</h3><br>
            <p>check out this image:
            <br>
                <a href="#"><img class="thumb_image" src="http://www.gravatar.com/avatar/f6ba1c2b27d3a607d894c70ba1be0f85?s=32&d=identicon&r=PG" alt="" ></a>
                <span class="large_image"><img src="files/pictures/photoshop/brit_airways.jpg" alt="">
                    <br>This is the larger version of the thumbnail. If you would like to see the full
                    version you can click <a href="#" style="text-decoration:underline; color:blue;"><i>HERE</i></a>
                </span>
            </p>
        </span>
    </li>
    <!-- PORTFOLIO ends -->

</ul>


</div>

Css

/* Reset things */
    *{
        padding: 0px;
        margin: 0px;
    }

    /* The pages width and height plus bkg color and margins */
    #container{
        width: 960px;
        height: 960px;
        background:#ABC;
        margin: 0 auto 0 auto;
    }

    /* minor stuff */
    a{ text-decoration: none; color:red; }
    ul, li{ list-style-type:none }      



    /*===================================
        set the nav menu link stuff
    ===================================*/
    #navmenu{
        float:left;
        margin-left: 50px;
        background: white;
        width:80px;
        height:25px;
        line-height:25px;
        padding:3px;
    }

    #navmenu a:hover{ color:green; }
    #navmenu a:focus{  font-size:16pt; text-decoration:underline; color:green; }


    /* Set stuff up in our span but hide it */
    li > span{
        display:none;
        width:875px;
        height:800px;
        float:left;
        background:white;
        color:grey;
        text-indent:15px;
        padding-right:3px;
        padding-left:6px;
        margin-top:30px;
    }

    /* show span stuff when link is clicked on */
li > input[type="checkbox"]{
display:none;
}  
li  label{
cursor:pointer;
}

li > input[type="checkbox"]:checked + label + span{ display:block; }

    /* Thumbnail parameters when link is clicked */
    li > input[type="checkbox"]:checked + span .thumb_image{
        display:inline-block;
        float:left;
        position:relative;
        background:red;
        outline:1px solid red;
    }

    /* minor thumnail stuff */
    li > input[type="checkbox"]:checked + label + span .thumb_image:hover{ outline:3px solid rgba(0,255,0, 1); }



    /* ===================================
        large image stuff parameters
    =====================================*/

    /* Set up and  Hide large image with z-index */
    li > input[type="checkbox"] + label + span span{
        z-index:-200;
        display:inline-block;
        float:left;
        color:black;
        width:600px;
        padding:4px;
        position:absolute;
        background:rgba( 255, 250, 108, .25);
        outline:1px solid darkgrey;
        text-align:center;
        margin: -0px 0 0 150px;
    }

    /* bring large image into view when thumbnail is hovered */
    li > input[type="checkbox"]:checked + label + span a:focus+span, li > input[type="checkbox"]:checked + label + span a:hover+span{ z-index:10; }

    /*
    li >a:focus+span .thumb_image:hover+.large_image{ z-index:10; }

    li > a+span .large_image{
        z-index:-200;
        display:inline-block;
        float:left;
        color:black;
        width:600px;
        padding:4px;
        position:absolute;
        background:rgba( 255, 20, 108, .5);
        border:1px solid black;
        text-align:center;
        margin: -0px 0 0 175px;
    }
    */
于 2012-07-05T05:11:43.390 に答える