Question

我怀疑我做了一些愚蠢的事情，但我有一些超链接用css作为图像设置，但它们不能用作链接。

实验页面位于http://cotswoldplayhouse.co.uk/jm3/index.php/what-s-on
并且它是“阅读更多”＆＃39;并且＆＃39;买票＆＃39;按钮。
页面是由php构建的，但html看起来像这样...

<td>
<div class="sg-read-more">
<a href="#">Find out more</a>
</div>
<div class="sg-book-ticket">
<a href="http://www.ticketsource.co.uk/event/70577" target="_blank">Book Ticket</a>
</div>
</td>

CSS就是这个......

div.sg-book-ticket {
        display:block;
        position:absolute;  
        background:url(images/buy-ticket.png) no-repeat 0 0; 
        right:15px;
        bottom:2px; 
        width:80px;
        height:40px;
        text-indent:-9999px;
        }

div.sg-book-ticket:hover {
background-position:0 -40px;
        }

图像显示正确且翻转有效，但它们不是链接我错过了什么？

Answer 1

我个人会设置链接的样式而不是div

div.sg-book-ticket{
 position:absolute;  
 right:15px;
 bottom:2px; 
}  
div.sg-book-ticket > a{
    display:block;       
    background:url(images/buy-ticket.png) no-repeat 0 0;       
    width:80px;
    height:40px;
    text-indent:-9999px;
}

div.sg-book-ticket a:hover{
    background-position:0 -40px;
}

Answer 2

如果您希望整个div可以点击，请使用：

<td>
<a href="#">
<span class="sg-read-more">
</span>
</a>
<a href="http://www.ticketsource.co.uk/event/70577" target="_blank">
<span class="sg-book-ticket">
</span>
</a>
</td>

Answer 3

您可以尝试以下方法吗？：

<a href="<a href="http://www.ticketsource.co.uk/event/70577" target="_blank" alt="book ticket" />
<img src="images/buy-ticket.png" />
</a>

而不是将图像放在CSS中？

图像未显示为超链接

3 个答案: