【html】hoverできない

html
1<h2 class="common"><a style="text-decoration: none; color:#EC007C;" href="page2.html">ふつうのロゴ</a></h2>

css
1.common{
2transition:1s;
3}
4
5.common:hover{
6color:#FEA3D3;
7}

これで実行しても、カーソルが乗っても色が変わりません。なぜですか?

行動規範の内容に同意します

回答2件

ベストアンサー

MineoOkudaさんが言うようにstyleアトリビュートの優先度の方が高いのが原因の一つです。
それを外すと次はlink時の色が優先され、色が多くのブラウザで青になるはずです。
疑似クラス:linkのcolorを設定することで上書き。
あとは指定先を正しくして完了です。
以下コードを確認ください。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Document</title>
6</head>
7
8<body>
9    <style>
10    .common a{
11        transition: 1s;
12        text-decoration: none;
13    }
14    .common a:link {
15        color:#EC007C;
16    }
17    .common a:hover {
18        color: #FEA3D3;
19    }
20    </style>
21    <h2 class="common"><a href="page2.html">ふつうのロゴ</a></h2>
22</body>
23</html>
24

投稿2015/09/14 15:57

Cf_cwd

総合スコア730

taishi1999

2015/09/15 04:36

common　aのaってなんですか? あと、:linkって調べたら、未訪問リンクのスタイルを指定するというものだったのですが、上書きとはもできるということですか?

taishi1999

2015/09/15 05:23

:linkが上書きされず、http://i.imgur.com/sIAcOrV.png←これから、ピンクの文字になりました、なぜですか?

taishi1999

2015/09/15 05:36

もういっこすみません transitionが反映されていませんでした。

Cf_cwd

2015/09/15 12:05

.common a　という指定で.commonの中のaタグという意味になります。全体的に知識不足であると感じますので基本的なCSSセレクタなどの知識を付けることをお勧めします。あとおせっかいかもしれませんが少しは自身で調べるようにする方が良いのではないでしょうか。質問ばかりしてその場をしのいだとしても何か条件が変化したり、トラブルが起きたとき対処できないのでは成長につながらないと思います。

taishi1999

2015/09/16 08:04

すみません。もう少し勉強してきます。お返事ありがとうございました。一応解決いたしました。

行動規範の内容に同意します