0

ホバー効果を作成しようとしています（以下のhtmlとCSSを使用）。ホバー効果は機能していますが、.portfolio_thumb の上に置くことができません。

私はCSSにそれほど精通していないので、優しくしてください:-) ここでテストサイトを実行しています: http://kazam.dk/36-2/#!prettyPhoto

あなたが見ることができる場所は、画像の下に読み込まれます!

CSS

.portfolio_thumb{
    position: relative;
    z-index: 0;

}

.portfolio_thumb a span{
    display: none;
    position: relative;
    float:left;
    width:163px;
    z-index: 2;
}

.portfolio_thumb a:hover span{
    display: block;
    position: absolute;
    z-index: 9;
    width:163px;
    height: 229px;
}

HTML

<div class="portfolio_thumb">

<!-- .portfolio_short_content -->
    <div class="portfolie_short_content_containe">


        <a class="lightbox" rel="lightbox" href="<?php echo $image[0]; ?>" title="<?php echo $image_desc; ?>">


            <p class="textarea"><?php echo $full_descr; ?></p>
            <img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" alt="<?php echo $image_alt; ?>"></img>                                     
                <span>
                    <p><span class="lable"><?php echo $short_descr;?></span> </p>
                    <p><span class="lable"><?php echo $link; ?></span> </p>                                                      
                </span>                                                                     
        </a>                                                                            

    </div>
</div>
4

3 に答える 3

0

ここでの動作チェック：http：//jsfiddle.net/surendraVsingh/fLZKe/2/ *（更新）

于 2012-07-02T12:22:31.317 に答える
0

次の CSS と HTML コードを試してください。

CSS

.portfolio_thumb{
    position: relative;
    border:1px solid;

}
.portfolio_thumb a div{
    display: none;
}
 .portfolio_thumb a:hover{
    position: inherit;
}
.portfolio_thumb a:hover div{
    display: block;
    position: absolute;
    top:50px;
    left:10px;
}

HTML

<div class="portfolio_thumb">

    <!-- .portfolio_short_content -->
    <div class="portfolie_short_content_containe">
        <a class="lightbox" rel="lightbox" href="<?php echo $image[0]; ?>" title="<?php echo $image_desc; ?>">
            <p class="textarea"><?php echo $full_descr; ?></p>
            <img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" alt="<?php echo $image_alt; ?>"></img>                                     
                <div>
                    <p><span class="lable"><?php echo $short_descr;?></span> </p>
                    <p><span class="lable"><?php echo $link; ?></span> </p>                                                      
                </div>
        </a>
    </div>
</div>
于 2012-07-02T12:51:26.587 に答える
0

  1. <span>タグをタグの上に移動し、<img>それにクラスを追加します (以下の例ではクラス「ホバー」を使用しました)。

  2. そのクラスを CSS セレクターに追加します。CSS の残りの部分は必ずしも変更する必要はありませんが、必要に応じてホバーを配置でき<span>ます。

  3. 作業例: http://jsfiddle.net/x6Z2L/

于 2012-07-02T14:04:18.173 に答える