0

最初は小さな画像を表示しますが、CSS を使用して大きな画像を画面外に移動します。しかし、小さな画像にカーソルを合わせると、大きな画像を画面に戻そうとしています。しかし、それは機能していないようです。

私のコード:

<div class="info">

<div class="image">

<img src="<?php echo $thumb; ?>" id="image" />

<span><img src="<?php echo $popup; ?>"></span></div></div>

そしてCSS：

.info .image span {
position:absolute;
left: -9999px;
/*visibility: hidden;*/
/*display: none;*/
background-color:#eae9d4;
}

.info .image img:hover{
z-index: 50;
cursor:pointer;
}

.info .image img:hover span{
/*visibility: visible;*/
/*display: block;*/
top: -10px;
left: -20px;
/*z-index: 99;*/
}

私が試したことはすべてコメントにあります。技術的にはうまくいくはずです。しかし、どこが間違っているのかわかりません。

どんな助けでも大歓迎です。ありがとうございました

4

2 に答える 2

4

は画像の<span>子孫ではなく、兄弟です。

+コンビネータ notを使用する必要があります。

または、 を使用して、 を含むセレクターに.image:hoverまったく関与させないこともできます。<img>:hover

また、画像の位置を調整する必要があります。現時点では、他のすべてが等しい場合、2番目の画像の左上をウィンドウの上部から10ピクセル、左側から20ピクセル離して配置しているため、画像の上部の10x20ピクセルが外側になります視力。

于 2013-05-16T12:40:14.773 に答える
0

イメージIDだけをターゲットにしてみましたか

.image:hover {
z-index: 50;
cursor:pointer;
}
于 2013-05-16T12:43:41.440 に答える