div上的链接宽度与背景图像

Question

我有以下html：

<div class="container">
    <a href="url here">
        <div class="logo">
            <h1>Name</h1>
        </div>
    </a>
</div>

和css：

.container {
width: 20%;
}
.logo {
background: url(images/ui-sprite.svg) no-repeat 0 0;
text-indent: -9999px;
height: 30px;
width: 150px;
margin: 25px 0;
}

我遇到的问题是链接徽标（背景图片）。目前，您可以悬停的链接区域是容器div的整个宽度，尽管徽标类具有已定义的宽度。这里有关于背景图像链接的最佳实践的想法吗？

由于

Answer 1

发现这最终有用，而且标记也少了！

http://ran.ge/2012/04/03/css-trick-turning-a-background-image-into-a-clickable-link-take-2/