4

次の HTML を検討してください。

<a href="http://google.com">foo <span class="bar">bar</span></a>

およびCSS:

a {
    text-decoration:none;
    border-bottom-width: 0px;
    border-bottom-color: green;
    border-bottom-style: solid;
}

a:visited {
    color: red;
    border-bottom-color: yellow;
}

a:hover {
    color: gray;
    border-bottom-color: gray;
}

.bar {
    color: inherit;
    border-bottom-width: 1px;
    border-bottom-color: inherit;
    border-bottom-style: inherit;
}

jsフィドル

私が期待するもの：

"bar" という単語は赤色で、下部の境界線が黄色である必要があります (は訪問済みのリンクであるa:visitedため、 から継承する必要があるため)。http://www.google.com

実際に何が起こるか:

「バー」という単語は青で、下の境界線は緑です。これはa、 ではなくから継承しているためa:visitedです。

ただし、 から継承しa:hoverます。それとその下の境界線の色が灰色に変わります。

<a>質問: 状態から値を継承する子を作成するにはどうすればよい:visitedですか? JS と jQuery を含むソリューションを受け入れます。inheritと の値colorを保持することが重要ですborder-bottom-color。

編集:どうやら、これはCSS の履歴リークにパッチを当てることと関係があります。それでも、私が望んでいたことを達成できるかどうか疑問に思っています。

4

2 に答える 2

0

color: inherit;とを削除するだけで正常に動作しますborder-bottom-color: inherit;

Inherit は の一部であるため、元の状態に戻すため、<a>継承するものは何もありません。

作業フィドル: http://jsfiddle.net/Hive7/5a8Pk/3/

于 2013-07-16T21:09:26.203 に答える