CSSを上書きしてbootstrapをカスタマイズする際のリンクについて

Question

長文失礼いたします。
CSSを上書きしてbootstrapをカスタマイズする際のリンクについてです。
lessがわからない人のBootstrap簡単カスタマイズ方法
http://qiita.com/maruyam-a/items/c5642a4cb279be75a1b2
にてカスタマイズ用のcssファイルを作ってbootstrapのCSSより後から読み込んでいます。

そして、下記コードの

<a href="#" class="custom_btn2">都道府県から調べる</a>

custom_btn2を、

a.custom_btn2: {
	background-color:#62162e;
	-webkit-border-top-left-radius:30px;
	-moz-border-radius-topleft:30px;
	border-top-left-radius:30px;
	-webkit-border-top-right-radius:30px;
	-moz-border-radius-topright:30px;
	border-top-right-radius:30px;
	-webkit-border-bottom-right-radius:30px;
	-moz-border-radius-bottomright:30px;
	border-bottom-right-radius:30px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	text-indent:0;
	border:4px solid #540f25;
	display:inline-block;
	color:#f2e6e4;
	font-family:Impact;
	font-size:18px;
	font-weight:bold;
	font-style:normal;
	height:65px;
	line-height:65px;
	width:200px;
	text-decoration:none;
	text-align:center;
}
a.custom_btn:hover {
	background-color:#0e2605;
	color:#f2e6e4;
}
a.custom_btn:active {
	position:relative;
	top:1px;
}

のように指定して表示させたいのですが、:hover時の背景と文字の色に変化が見られません。
bootstrapを初めて使うので、解決策が分かりません。
どのようにすれば:hover時の背景と文字の色を変えることができるのでしょうか。

Answer 1

ご指摘の通りです…。
どうも単純なミスだったようで、あっさりと解決しました。
a.custom_btn2:hover {
a.custom_btn2:active {
を書き換えていなかったのが原因だとわかりました…。ちょっと穴掘って入ってきます。

Comments

[takito]

問題が解決できてなによりです。
いろんな技術に触れているとそっちに意識が向いてしまって単純なミスを見逃してしまう・・・というのは長くプログラミングをやっていてもよくあります。
がんばってください。

Answer 2

こんにちは

単純なところの指摘を２点ほど、、、

(1)

a.custom_btn2**:**{

擬似クラスを使わないのであれば最後の**:**（コロン）は不要と思います。

(2)

a.custom_btn:hover {
a.custom_btn:active {

以上２箇所のクラス名はそれぞれ

a.custom_btn2:hover {
a.custom_btn2:active {

ではないでしょうか？

これが根本的な解決となるかわかりませんが、気になりましたので。