1

3 つの div があり、1 つが非表示になっています。

  • 親
    • メッセージ (非表示)
    • 画像

画像がホバーされたときにメッセージを表示する必要があります。通常は単純な作業ですが、div の配置で問題が発生すると思います。

右上隅に画像があり、画像をホバーすると、そのすぐ隣 (実際には左側) にテキスト メッセージが表示されます。親は の100% x 32px付いたバーposition: fixedなので、アイコンとメッセージがページ全体に浮かんでいます。

私はすでにSOでたくさんの答えを試しました。機能した唯一のものは を使用していましたが、それはカーソルがParent#parent:hover > divをホバリングするたびにメッセージを表示しますParentはページの上部にある大きな目に見えないバーであるため、これは悪いことです (ただし、シュリンクラップでうまく機能するはずですが、できませんでした)やれ）。

これがjsフィドルです。代替手段があれば教えてください。

編集：これは、どのように機能するかのサンプル画像です。また、ページとともにフロートおよびスクロールする必要があります。 example_img

4

1 に答える 1

2

スタイルに記載されているように、要素の位置を切り替えます。

これは Adjascent Sibling selector を使用しているためです+。「隣接」とは、「すぐ後に続く」という意味です。

デモ

CSS

#img:hover + #msg {
    display: block;
}

#HTML スニペット

    <div id="img">
        <a href="some link here">
        <img src="http://j.mp/18xsrJQ"/>
            </a>
    </div>
    <div id="msg">
            This should appear if icon is hovered.
    </div>

これを説明するには:-

次の簡単な例を考えてみましょう:- タグのp直後h3を灰色で表示するには。p を h3 の前に置くと、機能しません。これが隣接兄弟セレクターの仕組みです。

<h3>Hey, an H3 element</h3>
<p>Here's a paragraph which is short</p>

 h3 +p {
    color: gray;
}
于 2013-05-10T02:58:27.113 に答える