1

私はこの例でいくつかの問題を抱えています:

<img src="image1/<?php echo $file; ?>.jpg" style="width:500px" /> 
<p id="caption"><?php echo $caption; ?></p>

画像をホバーするときに CSS でキャプションを取得しようとしています。

と を使っa img{hover;}てみましたp {hover;}。

画像にカーソルを合わせたときにキャプションを取得する方法はありますか? 例はPHPであり、CSSまたはJavascriptの場合は検索できるかもしれませんが、これまでのところ解決策が見つかりません.

説明と例に感謝します。

4

4 に答える 4

4 
/* by default, hide caption: */
#caption { display: none; } 
/* if caption is next to a hovered img, show: */
img:hover + #caption { display: block; }

jsFiddle デモ

  • +IE8 からサポートされているAdjacent Sibling Selectorです。
  • :hover疑似クラスは、マウスが上に移動する要素のスタイルを設定するために使用されます
  • ドキュメントで複数のキャプションを使用する場合は、ID の代わりにクラスを使用する必要があることに注意してください。ID はドキュメント内で一意である必要があります。

IE7 で動作するものが必要な場合は、次のような HTML を検討してください。

<div class="image-with-caption">
    <img src="whatever.png" style="width:200px" /> 
    <p class="caption">caption</p> 
</div>

CSS は次のようになります。

.caption { display: none; }
.image-with-caption:hover .caption { display: block; }​

<a href="http://jsfiddle.net/pttsm/1/" rel="nofollow">jsFiddle デモ

于 2012-06-15T19:34:36.623 に答える
2

あなたがしたいimg:hover {/* css */}

実際には、おそらく次のようなことをしたいと思うでしょう:

<div class="hoverme">
  <img src="image1/<?php echo $file; ?>.jpg" style="width:500px" /> 
  <span><?php echo $caption; ?></span> 
</div>

そしてあなたのCSSで：

div.hoverme span{
    display: none;
}

div.hoverme:hover span{
    display: block;
}
于 2012-06-15T19:32:55.783 に答える
2

pの上にカーソルを置いているときに のスタイルに影響を与えるにはimg:

img:hover + #caption {
    display: block; /* or whatever...*/
}

または：

img:hover ~ #caption {
    display: block; /* or whatever... */
}

これらの例では、'caption' を持つ要素が1 つ しかないと仮定していることに注意してください。複数の要素がある場合、 はドキュメント内で一意でなければならないため、代わりにa を使用する必要があります。pid pidclassid

は+CSS の隣接兄弟コンビネータであり、ユーザーがホバリングしている の#caption直後にあるを選択します。img

the~は CSS の一般的な兄弟コンビネータであり、ホバリングされ#captionた の後の兄弟である兄弟要素を選択します。img間に出現する可能性のある要素に関係なく (ただし、同じ親要素内の兄弟である必要があります)。

参照：

于 2012-06-15T19:34:40.177 に答える
0

次のように、JavaScript イベント onMouseOver および onMouseOut を使用して、キャプションを表示/非表示にしてみてください。

<img src="image.jpg" style="width:500px"
    onMouseOver="document.getElementById('caption').style.display='block'"
    onMouseOut="document.getElementById('caption').style.display='none'" />
<p id="caption" style="display:none">Caption here</p>
于 2012-06-15T19:41:13.383 に答える