1

我到处寻找解决方案，所以我并不认为它很简单。

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

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

它提供了以下 CSS 解决方案：

标签 l = new Label("我的文本"); l.addStyleName("我的标签");

#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> */
4

2 回答 2

1

如果要在图标上方显示文本，可以将 CSS 更改为：

.my-label {
    background:url(my-icon.png) no-repeat bottom center;
    padding-bottom:20px; /* this should be >= the icon's height */
}
于 2013-04-30T05:10:00.033 回答
0

如果我们也能看到您的 HTML，或者至少是您所描绘内容的屏幕截图，那就更好了，但这应该很容易。您可以环绕<a>文本和图标并设置:hover规则，或者您可以通过:before伪元素将文本添加到<a>，可以为悬停和非悬停状态设置样式。

编辑：

既然我们对您想要什么有了更好的了解，那么您可以这样做：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
    .blogicon {
    width: 70px;
    text-align: center;
    backgrond: #f7f7f7;
    padding-top: 4px;
    }

    .blogicon a {
    display: block;
    background:url("http://dispatchesusa.typepad.com/the_dov_blog/link-images/bookmark.png") no-repeat 50% 100%;
    padding-bottom: 90px;
    color: blue;
    text-decoration: none;
    font-weight: bold;
    }

    .blogicon a:hover, .blogicon a:focus {
        color: red;
    }
</style>

</head>
<body>

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

</body>
</html>

我冒昧地更改<h6>为<div>，因为这可能不是一个真正的标题。但是，当然，您可以根据需要将其改回，但很少需要<h6>，因此我怀疑您出于演示原因使用它，这是应避免的。如图所示，将链接的字体粗细设置为粗体很容易。

于 2013-04-30T05:17:29.080 回答