0

リンクの周りの境界線を取得して、リンクの色を変更しようとしています。色を少し変えるように設定したのでa.hover、境界線の色も変えたいと思いました。CSSとHTMLだけでこれを行うことは可能ですか？

これは私のHTMLコードです:

<h1>
    <a class="border" href="http://example.com">Home</a>
    <a class="border" href="http://example.com/forum">Forum</a>
</h1>

これは私のCSSです：

h1 {
text-align: center;
color:#00F;

}
a:link {
color: #00F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #00F;
}
a:hover {
text-decoration: none;
color: #006;
}
a:active {
text-decoration: none;
color: #000;
}
a.border {
border-style: solid;
border-color: #00F;
border-width: 5px;
}
4

6 に答える 6

3

私はコードをきれいにします:

<h1>
    <a href="http://example.com">Home</a>
    <a href="http://example.com/forum">Forum</a>
</h1>​

    h1 {
  text-align: center;
  color:#00F;
}
a:link, a:visited {
  color: #00F;
  text-decoration: none;
  border: 5px solid #00F;
}
a:hover {
  text-decoration: none;
  color: #006;
  border: 5px solid #006;
}
a:active {
  text-decoration: none;
  color: #000;
  border: 5px solid #000;
}​

Border を使用して、タグ html のクラスを削除しました。

http://jsfiddle.net/SUMEk/

于 2012-12-18T20:37:55.580 に答える
2

あなたは私が思うborder: 5px solid #000000;あなたの中に追加しようとしていますa:hover{}

  • borderタグのクラスを削除する<a>か、内部に上記を追加しない限り、これは機能しませんa.border:hover{}- 説明についてはコメントを読んでください。
于 2012-12-18T19:52:44.097 に答える
2

css プロパティ「border」を探しています。次のコードは、ホバー時に境界線を追加します。

a.border:hover {
    text-decoration: none;
    color: #006;
    border-style: solid;
    border-color: red;
    border-width: 5px;
}

a.border は a:hover セレクターよりも具体的でした。したがって、境界線は表示されません。

JS フィドル: http://jsfiddle.net/vJ2fJ/2/

于 2012-12-18T19:56:27.707 に答える
2

必要なのはこれだけです：

a.border:hover {
    border-color: red;
}

他のスタイルはすでに継承されています。

于 2012-12-18T20:49:21.657 に答える
1 
a.border:hover{
    border-color: #006; /*Or whatever*/
}

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/を読むことをお勧めします

于 2012-12-18T20:36:54.213 に答える
1

ユーザーがアイテムの上にマウスを置いたときにスタイルを変更する場合は、「:hover」疑似セレクターを使用します。CSS は次のようになります。

a:hover {
    border:5px solid #00F;
}

リンクにカーソルを合わせると、その効果が表示されます。

于 2012-12-18T20:06:47.933 に答える