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,..... then in style 而不是"a > div"use".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 回答