0

2つのスパン要素を含む複合ハイパーリンクがあります。1つはホバーで下線を付け、もう1つは下線を付けません。この良い例は、Twitterのツイートの上部にある名前とユーザー名のリンクのペアです。私は彼らがそれをどのように行うのか理解できません。

私の試み：

HTML： 

<a href="http://www.google.com">
<span class="main">My link</span>
<span class="caption"> and caption</span>
</a>​

CSS： 

a {
    text-decoration:none;
    font-weight:bold;
}
a:hover {
    text-decoration:underline;            
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a span.caption:hover {
    text-decoration:none; /* I want this to portion to not be underlined, but it still is */
}

フィドル： http： //jsfiddle.net/vgKSh/1/

4

6 に答える 6

4 
{
    テキスト装飾:なし;
    font-weight:太字;
}
a:ホバースパン{
    テキスト装飾:下線;            
}
span.caption {
    色:グレー;
    フォントの太さ:通常;
}
a:hover span.caption {
    テキスト装飾:なし;
}
</pre>
于 2012-05-31T21:31:28.433 に答える
2 
a:hover span {
    text-decoration:none;            
}

a:hover .main{
    text-decoration: underline;            
}

スタイルとして、私は決して text-decoration を使用せず、border-bottom を代わりに少しパディングして使用します。

于 2012-05-31T21:33:27.000 に答える
2 
a {
    text-decoration:none;
    font-weight:bold;
}
a:hover {
    text-decoration:none;            
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a span.main:hover {
    text-decoration:underline;
}
于 2012-05-31T21:34:41.197 に答える
2

あなたはほとんどそれを手に入れました。クラスtext-decoration:underline;に入れるだけ。main

a {
    text-decoration:none;
    font-weight:bold;
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a span.main:hover {
    text-decoration:underline;
}

http://jsfiddle.net/vgKSh/9/

于 2012-05-31T21:32:23.007 に答える
2

ここでフォークして修正しました：http://jsfiddle.net/CtD8M/

グローバルに設定するのではなく、特定のスパンをテキスト装飾の下線に設定するだけです

于 2012-05-31T21:32:43.747 に答える
2

フィドル: http://jsfiddle.net/vgKSh/4/

a {
    text-decoration:none;
    font-weight:bold;
}
a:hover span.main {
    text-decoration:underline;            
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a:hover span.caption {
    text-decoration:none;
}
于 2012-05-31T21:33:03.157 に答える