Question

我一直在搜索Stack / Google并尝试了一些技巧，以便为此列表中的图像添加链接。这是jQuery滑块的基本html：

    <div id="slide">        
        <div class="slider">
            <ul class="items">
                <li><img src="images/slider-1.jpg" alt="" /></li>
                <li><img src="images/slider-2.jpg" alt="" /></li>
                <li><img src="images/slider-3.jpg" alt="" /></li>
            </ul>
      </div>

CSS：

      #slide { position:relative; width:948px; height:398px; margin:0 auto; z-index:100; overflow:hidden;border:#c7c7c7 1px solid; border-top:none !important; }
      .slider { width:948px; height:398px; margin:0 auto; position:relative; z-index:2; overflow:visible !important; }
      .items { display:none;}

我只是想尝试添加每个背景图片的链接。我已经尝试过尽可能多的想法，最后一次尝试我在其中一个列表项目中使用了以下内容：

      <li><a href="http://linkedbg/"><img src="images/slider-1.jpg" alt="" />Linked Background Image</a></li>

以下是无序列表项：

      .items { display:block; text-indent:-9999px;}

仍然无法使图像成为链接？

会继续搜索，但是否有人可以指出我正确的方向？

如果有人有兴趣......这是我试图将此链接添加到的模板：

http://www.templatemonster.com/free-templates/free-website-template-restaurant-jquery-slider.php

Answer 1

我通常在下面这样做。

display:block到标记
使标签的宽度和高度适合每个img尺寸
在css中，background-image:url();而不是在html中使用img标记

我希望我的回答可以帮到你:)。

Answer 2

以下代码可以正常使用：

<html>
    <head>
    </head>
    <body>
        <ul>
            <li><a href="http://www.google.de"><img src="anImageA.png" alt="" /></a></li>
            <li><a href="http://www.bing.de"><img src="anImageB.png" alt="" /></a></li>
        </ul>
    </body>
</html>

无需CSS或Scripts来回答您的问题。也许你有一个拼写错误，或者包含一些脚本，这会禁用你的链接。

Answer 3

根据我对您的问题的看法，您要做的是add image on a link而不是add link on an image。使用list-style-image:url('image path here');，请参阅this

或者，如果你真的想用图片作为链接，你可以使用伪元素:before和:after，你可以使用其他标签而不是li - 我喜欢这一个。见this

CSS无序列表，应用链接到背景图像

3 个答案: