css - 带有头顶标签的图标 - 如何让两者都响应悬停，使用 CSS？

Question

我到处寻找解决方案，所以我真的不希望它很简单。

我想显示一个带有上方文本标签的图标。我希望文本响应悬停，无论光标位于文本上还是图标图像上。

我能找到的最接近的例子是这个链接 http://www.sencha.com/forum/showthread.php?122028-Label-with-icon

它给出了以下 CSS 解决方案:

Label l = new Label("My Text"); l.addStyleName("my-label");

#CSS
.my-label {
background:url(my-icon.png) no-repeat right center;
padding-right:20px;
}

但我的 CSS 技能不够好 - 我没有成功地将其适应上方居中的标签而不是图标图像左侧的居中标签。

有人愿意为我试一试吗？

---

附加信息:

这就是我现在拥有的 - 它不起作用，"display: block; 似乎不允许我使用 background-img 属性.. .

CSS:

 .blogicon {
    width: 70px;
    text-align: center;
    background-img:url("http://dispatchesusa.typepad.com/the_dov_blog/link-images/bookmark.png") no-repeat bottom center;
    display: block;
    padding-top: 4px;
    padding-bottom: 90px;
    }

HTML:

/* <h6 class="blogicon"><a href="/blog-index.html/">Blog</a></h6> */

Answer 1

如果想在图标上方显示文字，可以将CSS改成:

.my-label {
    background:url(my-icon.png) no-repeat bottom center;
    padding-bottom:20px; /* this should be >= the icon's height */
}