5

次の例では、フォントを使用してナビゲーション用のアイコンを作成しています： http ://www.blackcountrydesigns.co.uk/examples/green/

私が抱えている問題は、リンクにカーソルを合わせると、リンクとアイコンの両方に下線が表示されることです。

アイコンの下線を削除してリンクに残す方法を知りたいのですが。

これが私のコードです：

HTML
<ul class="hidden-phone">
         <li><a class="entypo-home" href="#">Home</a></li>
         <li><a class="entypo-briefcase" href="#">Services</a></li>
         <li><a class="entypo-picture" href="#">Portfolio</a></li>
         <li><a class="entypo-address" href="#">Contact</a></li>
</ul>

CSS
#nav ul li a {color:#ccc; margin-left: 25px;}
#nav [class*='entypo-'].active:before {color:#666;}
#nav [class*='entypo-']:before {font-size: 46px; position: relative; top: 5px;left: -3px; color:#999;}
[class*='entypo-']:hover:before {text-decoration:none !important;}

どうもありがとう

4

3 に答える 3

9

生成されたコンテンツから（通常）継承されたスタイルを削除するために私がまだ見つけた唯一の方法は、（position: absoluteコメントから）簡略化されたデモを使用してそれを与えることです：

a:link
{
    text-decoration: none;
    position: relative;
    margin-left: 1em;
}

a:hover
{
    text-decoration: underline;
}

a:before
{
    content: '#';
    position: absolute;
    right: 100%;
    top: 0;
    bottom: 0;
    width: 1em;
}

JSフィドルデモ。

もちろん、このアプローチの欠点は、生成されたコンテンツ（および親要素の）に明示的widthに割り当てられる必要があることです。margina

于 2013-03-24T23:01:25.230 に答える
2

別のアプローチは、リンクのテキストを要素でラップすることです。たとえば、スパン、「a」からアンダースコアを削除し、ホバー時にスパンに適用します。

<li><a class="entypo-home active" href="#"><span>Home</span></a></li>

[class*='entypo-'] a { text-decoration: none; }
[class*='entypo-'] a:hover span { text-decoration: underline; }
于 2013-03-24T23:06:27.223 に答える
0

うまくいかないのではないかと思います。クラスにあなたを与えて、それら<li/>のために設定することをお勧めします:before。

position: absoluteこのアプローチを使用したくない場合は、ここに私の提案のフィドルがあります。

于 2013-03-24T23:02:01.763 に答える