0

次の例を用意しました。

http://jsfiddle.net/NSGRq/1/

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>

ありがとう

4

1 に答える 1

3

要件が何であるかを正確に伝えるのは難しいですが、これは取るべきアプローチの 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;
}
于 2013-06-09T21:58:07.273 に答える