如何在div的背景图上获取锚点标签？

Question

HTML:

<div id="facey">
    <a href="http://www.facebook.com.au"></a>
</div>

CSS：

#facey {
    float: left;
    width: 32px;
    height: 32px;
    background: url(file:///C|/Users/User/Documents/TAFE%20-%20Web/ICAWEB411A%20Design%20simple%20web%20page%20layouts/testing%20color/icons/facey%20sprite.png) no-repeat 0 0;
}

#facey:hover {
    background-position: 0 -32px;
}

我有一个针对社交媒体图标的CSS精灵，我一直在尝试给它们添加锚点链接到其对应的网站，但是我不确定它是如何工作的，因为精灵图像被用作背景图像，而锚点标记似乎不能在div中起作用。我不太确定我在这里做错了什么？

- elroyz

Answer 1

在#facey a中添加CSS样式display:block;。

- Vucko

Answer 2

将背景放在锚点上而不是div上，最终可点击的是锚点标签。这里实际上完全没有必要使用div。

<a href="http://www.facebook.com.au" id="facey"></a>

a#facey {
  float: left;
  width:32px;
  height: 32px;
  display: block;
  background:url(file:///C|/Users/User/Documents/TAFE%20-%20Web/ICAWEB411A%20Design%20simple%20web%20page%20layouts/testing%20color/icons/facey%20sprite.png) no-repeat 0 0;
}

a#facey:hover {
  background-position:0 -32px;
}

- Richard

Answer 3

您不能像那样从文件系统引用文件，这在除IE之外的任何浏览器中都被视为安全漏洞。请尝试改用相对路径：

#facey {
    float: left;
    width:32px;
    height: 32px;
    background:url(icons/facey%20sprite.png) no-repeat 0 0;
    }

- cimmanon