17

リンクがあります<a class="link-articles" href="#articles">My Articles</a>

と私のCSS.link-articles { text-decoration: underline; color: blue; }

ただし、ホバーすると、青い下線の代わりに赤い下線を付けたいのですが、テキストは青のままで、下線だけが赤に色を変えます。

そのようなことをどのように行うのですか？

4

9 に答える 9

19

表示できないのでどの色テキストの下線の2番目の色。1つの戦略は、それを削除して境界線を使用することです。

.link-articles
{
    border-bottom: solid 1px blue;
    text-decoration: none;
}

.link-articles:hover
{
    border-bottom-color: red;
}

を残すと、ホバリング時に下にシフトすることに注意してくださいtext-underline。これは、その配置が下の境界線と正確に同じ位置ではないためです。

このアプローチには、またはに置き換えることで、を使用して下線を配置し、line-height代替の線種を設定できるという追加の利点があります。soliddotteddashed

ボーダレスアプローチ：

@Pacerierがコメントで指摘しているように、これは疑似クラスとCSSコンテンツを使用する代替戦略です（JSFiddle）。

.link-articles
{
    position: relative;
}

.link-articles[href="#articles"]:after
{
    content: 'My Articles';
}

.link-articles:after
{
    color: red;
    left: 0;
    position: absolute;
    top: 0;
}

ただし、アンチエイリアシングを使用すると、テキストの端に色が混ざり合う場合があります。contentCSSを手動で入力する必要があるという考えが気に入らない場合は、属性を使用するか、要素を複製することができます。

于 2013-03-18T19:40:55.410 に答える
7

使用border-bottom：

a:hover.link-articles {border-bottom: 1px dotted red; text-decoration: none;}

デモを見る

于 2013-03-18T19:38:54.067 に答える
4

ただ行う：

a:hover {
  text-decoration-style: dotted
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style

于 2020-02-04T19:10:29.340 に答える
3

境界線を使用する：

.link-articles { text-decoration: none; border-bottom: blue 1px solid; }
.link-articles:hover { border-bottom: red 1px dotted; }
于 2013-03-18T19:38:53.140 に答える
2

デモフィドル 

.link-articles { text-decoration: none; border-bottom: 1px dotted blue; }
.link-articles:hover { text-decoration: none; border-bottom: 1px dotted red; }
于 2013-03-18T19:42:23.230 に答える
1

これを試して：

 .link-articles{ text-decoration: none; border-bottom:1px dotted; border-color:blue; }
 .link-articles:hover{ border-color:red; }

デモ

于 2013-03-18T19:39:03.257 に答える
1

ホバーの下の境界線を表示します。

a.link-articles {
    text-decoration: none;
    border-bottom: 1px dotted blue;
}
a.link-articles:hover {
    border-bottom: 1px dotted red;
}
于 2013-03-18T19:39:31.140 に答える
0

:hoverスタイルは、ユーザーが要素の上にマウスを置いたときにスタイルを設定するために使用されます。

.link-articles       { ... }
.link-articles:hover { ... }

また、点線、破線、幅のスタイリングborder-bottomの代わりにプロパティを使用できます。text-decoration

于 2013-03-18T19:39:09.403 に答える
0

CSS3text-decoration-colorプロパティを使用できますが、残念ながら、このtext-decoration-colorプロパティは主要なブラウザのいずれでもサポートされていません。

Firefoxは、代替の-moz-text-decoration-colorプロパティをサポートしています。

参照：http ：//www.w3schools.com/cssref/css3_pr_text-decoration-color.asp

ブラウザのサポート：http ：//caniuse.com/#search=text-decoration-color

JSFiddle（すべてのブラウザで動作するわけではありません）

したがって、それを行うための最良の方法は、border-bottomcssプロパティをトリックとして使用することです。

于 2015-06-25T14:10:27.257 に答える