0

私はこれを理解できないようです。ホバーすると画像が別の画像に変わるシステムが欲しいです。

私のhtmlには次のものがあります：

<div class="linkyimage">
<img src="image/red.png" alt="red" />
    <p class="hovvery"<img src="image/black.png"></p>
</div>

そして、私のcssで：

.linkyimage{
    position: relative;
    height: 250px;
    width:250px:    
}   

.hovvery{
    position: absolute;
    height: 250px;
    width:250px:
    visibility: hidden;
    opacity: 0;
}

.linkyimage:hover .hovvery {
    visibility: visible;
    opacity:1;
}

それでも、私には何も起こらないようです。どこが間違っていますか？

編集：

まだまだ効果が実感できません・・・・・。

.linkyimage{
    position: relative;
    height: 250px;
    width:250px; 
}   

.hovvery{
    position: absolute;
    height: 250px;
    width:250px;
  visibility: hidden;
  opacity: 0;
    }

.linkyimage:hover .hovvery{
    visibility: visible;
    opacity:1;
    }

およびhtml：

<div id="content">

    <div class="linkyimage">
    <img src="image/red.png" alt="red" />
    <p class="hovvery"<img src="image/black.png" /></p>
    </div>

    <img src="image/yellow.png">
    <img src="image/lblue.png">
    <img src="image/green.png">
    <img src="image/brown.png">

    <div class"linkyimage">
    <img src="image/dblue.png" alt"blue" />
    <p class="hovvery"<img src="image/black.png" /></p>
    </div>
</div>

マウスオーバーで黒い画像に変わる画像のギャラリーのようなものに行きます-将来的には、画像の説明がその上に表示されるようにしますが、今は基本を始めようとしています!

4

1 に答える 1

4

Working FIDDLE Demo

次の行で終了していませんp:

<p class="hovvery"<img src="image/black.png"></p>

正しいコード:

<div class="linkyimage">
    <img src="image/red.png" alt="red" />
    <p class="hovvery"><img src="image/black.png" /></p>
</div>

また、CSS に構文エラーがあります。

width:250px: /* it must be semicolon ; at the end */

これを次のように変更します。

width: 250px;
于 2013-05-25T06:13:21.790 に答える