0

私のサイトにはテキスト ハイパーリンクがあり、それらの上にマウスを置くと、リンクの下の行に小さなサムネイル画像が表示されます。

--次のページにある例: http://synapsecomic.com/synapse_archive.html --.

最初のコードは次の場所にあります: Display Image On Text Link Hover CSS Only。

可能であれば、以下に示すように微調整したいと思います。これを行うために、HTML と CSS のみを使用しています。

HTML:

1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, (...), 
<a href="synapse_author.html">24,
<div><img src="comic_images/Panels/Master_List/synapse_00001.gif" width="150" height="100"   />
</div></a> 
25<br /><br />

<a href="synapse_author.html">26,
<div><img src="comic_images/Panels/Master_List/synapse_00000.gif" width="150" height="100" />
</div></a>
27, 28, 29, 30, 31

CSS:

a>div { display: none; }
a:hover>div { display: block; position:absolute; border: 5px solid #FFF;}

リンク 26 にカーソルを合わせると、リンクのすぐ下にサムネイルが表示されます。私の問題は、24 へのリンクにカーソルを合わせると、サムネイルがテキストの真下ではなく左に沿って表示されることです。これはおそらく、他のすべてのページでも問題になるでしょう (ただし、まだリンクに変換されていません)。添付されているリンクのすぐ下にサムネイルを表示する方法はありますか?

可能であれば、素人の言葉であなたの答えを説明してください。私はまだコーディングを始めたばかりです (正直に言って、ここまでできたことに驚いています)。ご協力に感謝します。必要に応じて、私の説明を明確にします。

4

2 に答える 2

0

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

.archivepage_body a {
   position: relative;
}
a > div {
   display: none;
   position: absolute;
   left: 0px;
   top: 0px;
}

「左」と「上」の値を調整して、適切な位置を見つけることができます。また、「a」タグに CSS クラス名を付けて、そのクラスをスタイリングに使用するとよいでしょう。

例として：使用する<a class="link" href="synapse_author.html">24,..... 代わりにスタイルで"a > div"".link > div"

                     <
于 2013-11-13T16:52:44.853 に答える
0

アンカータグ内にブロック要素をネストしない、このようなアプローチを採用してみませんか(理想的ではありません..)

HTML:

<ul>
    <li>
        <a href='#'>Item 1</a>
        <ul>
            <li>
                image 1
            </li>       
        </ul>
    </li> 
    <li>
        <a href='#'>Item 2</a>
        <ul>
            <li>
                image 2
            </li>       
        </ul>
    </li>     
</ul>

CSS:

ul, li{
    list-style:none;
    margin:0;
    padding:0;
}
ul ul{
    display:none;
}
ul li{
    position:relative;
    display:inline;
}
ul li:hover ul{
   display:block;
   position:absolute;
}
于 2013-11-13T16:52:03.600 に答える