1

Span を使用して簡単な CSS ツールチップを作成できると読んだので、試してみましたが、うまくいかず、理由がわかりません。

if($result = $mysqli->query($query)) {
    while($obj = $result->fetch_object()) {
        $image = $obj->Image;
        $page  = $obj->Page;
        $name  = $obj->Name;
        if($image != null) {
            echo "<a href=" . $page . " target=_parent><img src=" . $image . " width=93 height=66><span class=info>test</span></img></a> ";
        }
    }
}

そしてCSS：

  <style type="text/css">
    body,td,th {
        font-family: "Myriad Pro";
        font-size: 12px;
        background-color:#fcfcfc;;
    }
    a {
        border:none;
    }
    img {
        border:thin solid;
        border-color:CCC    
    }
    img:hover {
        opacity:0.5;    
    }
    span.info {
        display:none;   
    }
    img:hover span.info {
        display:block;position:absolute; width:200px; height:200px; 
    }
    </style>

私の問題は、スパンがまったく表示されないことです。これを修正する方法はありますか？

4

4 に答える 4

2

あなたが探しているセレクターはこれです：

img:hover + span.info {
    display:block;position:absolute; width:200px; height:200px; 
}

は+隣接する要素用です。スペースの使用は子孫要素用です (そして、span間違いなく の子孫ではありませんimg)。

于 2013-01-10T22:27:14.603 に答える
1

span タグはイメージタグの子ではないため、イメージタグのホバーイベントにすることは機能しないと思います。

イメージ タグには、コードに記述したような終了イメージ タグがありません。

最後にスラッシュを入れるだけで閉じることができます。

<img src="" />

たとえば、機能するはずの「a」タグのイベントにすると

a:hover span.info {
    // your css here
}
于 2013-01-10T22:24:41.593 に答える
1

次の 2 つのことを行う必要があります。

  1. span は img タグではなく a タグの子であるため、「img:hover span.info」を「a:hover span.info」に変更します。
  2. a タグにポジショニングを適用します (position:absolute は、親の位置が明示的に指定されている場合にのみ、親に対して相対的になります)

上記の + セレクターは実際に CSS3 対応のブラウザーで機能しますが、これはすべてのブラウザー (IE8 以下) で機能します。

于 2013-01-10T22:27:38.077 に答える
0

私が知る限り、IMGタグ内に何もネストすることはできません（これが表示されない理由です）-次のようにします：

CSS:

.tippedImage {
position: relative
}

.tippedImage span {
display: none;
position: absolute;
}

.tippedImage:hover span {
display: block
}

HTML:

<span class="tippedImage">
<img src="someimage.gif" />
<span class="tooltip">Tool tip text</span>
</span>
于 2013-01-10T23:56:53.060 に答える