Question

我准备了以下示例：

是否可以仅使用CSS，只要圆圈图标悬停就加下“电子邮件”？

<ul class="inline">
    <li><a class="icon-stack" title="Email" href="mailto:info@info.com">
                <i class="icon-circle icon-stack-base"></i>
                <i class="icon-envelope" style="color: white;"></i> 
        </a><a title="Email" href="mailto:info@info.com">Email</a>
    </li>
   </ul>

是否也可以删除完全相同的重复标签？

<a class="icon-stack" title="Email" href="mailto:info@info.com">
<a title="Email" href="mailto:info@info.com">Email</a>

由于

Answer 1

很难准确说出您的要求，但这是一种方法。

http://jsfiddle.net/yXWpu/

<强> HTML

<ul class="inline">
    <li><a class="icon-stack" title="Email" href="mailto:info@info.com">
                <i class="icon-circle icon-stack-base"></i>
                <i class="icon-envelope" style="color: white;"></i> 
        <span class="email-text">Email</span></a>
    </li>
</ul>

CSS

.icon-stack {
    font-size: 32px;
}

a[class^="icon-"], i[class^="icon-"] {
    text-decoration: none;
    color: #1BA1E2;
}

a[class^="icon-"] .email-text {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10pt;
    margin-left: 65px; 
}

a[class^="icon-"]:hover .email-text {
    text-decoration: underline;
}

如何将堆叠图标添加到锚链接

1 个答案: