複数クラスを持つ要素のhoverについて

Question

<div>
<p>〜〜〜</p>
<div class="btn small_btn red_btn" id="hover">ホバーで色を変えたいボタン</div>
</div>

上記のコードのボタンを、ホバーで色を変えたいのですがうまくいきません。

div.red_btn {
    padding: 10px
}
div .btn{
    background-color: #fff;
    /*padding: 16px 0;*/無効化
    text-align: center;
    color: #000;
    border-radius: 3em;
    max-width: 200px;
}
.small_btn {
    margin-top: 20px!important;
}
div#hover:hover div.btn{
  background-color: blue;
  color: #fff;
  border: solid 2px vlue;
    padding: 20px 40px;
    padding-top: 10px;
}

以上のようなCSSをかき、開発者ツールのホバーで試したら問題なく色が変わるのですが、
ブラウザ上ではうまくいきません。（開発者ツールとブラウザの動作が違うことはよくあることなのでしょうか。)
解決に向け、アドバイスをいただきたいです。
また、擬似要素は複数のクラスを持つ要素には指定はできないのでしょうか？

8/7追記

#hover:hover{
  background-color: blue!important;
  color: #fff!important;
  border: solid 2px blue!important;
    padding: 20px 40px!important;
    padding-top: 10px!important;
}

ご指摘いただいた通り、importantをつけてみました。
が、先日と同様開発者ツールでしかhoverが確認できない状態です。

Comments

[mix-peach]

提示のHTMLには、cssで指定している「div .btn」 も、「div#hover:hover div.btn」も存在しませんが。。。
HTMLが間違っている（提示で省略しただけ？）のか、そもそもcssの指定の仕方が間違っているのか・・・

[xminimx]

htmlコードで省略していた部分を追記しました。ご確認ください。

[mix-peach]

提示のHTMLとCSSであれば、他の方の回答通りの修正で、私の手元でも青くなります。
もしスタイルが競合して負けているのであれば、他のcssの情報が必要ですね。。。
ちなみに、xminimxさんが書かれたhoverが利かない、とのことですが、それらが利いていない状態でhoverすると変わるスタイルはあるのでしょうか？
それから、確認している開発者ツールに、何を利用されているのかも記載いただくと良いかもしれません。

[xminimx]

一番上の<div>にfloat:right;をかけているのですがそれの影響でしょうか。
float: right;
display: inline-block;
この２つのスタイルをかけています。
他の要素にかけたhoverは問題なく効くのですが…
開発者ツールはgooglechromeを使用しています。

[mix-peach]

floatとか、displayとかは、あんまり関係なさそうですねぇ（手元で追加して確認しましたが、特に影響はなかったです）

あとは、他の要素にかけたhoverが効くならやはり、該当部分のcssの記述がミスっている可能性（スペルミスとか全角スペースが紛れてるとか）が高いかも？って話だと思うので、div#hover:hover{中身含めて全部}　を、一度まるっと書き直してみてはどうでしょうか（satsh12stさんの回答から、コピペすると良いかもですネ）
それでもダメだったら、mts10806さんの提案されている「!important」の追記も試してみてください。

Answer 1

二日に渡り様々なアドバイスをいただき、ありがとうございました。
お恥ずかしいのですが非常に初歩的な間違いをしておりました。
更に親要素を確認していったところ、全体の親要素としている<class="container">に
何かの拍子でz-index:200;を設定しており、そのせいで効かなかったようです。
ですがタグの閉じ忘れや綴り間違い、また配下要素について見直す良い機会でした。
若輩者ですが、またご指導・ご鞭撻のほどよろしくお願いいたします。

Answer 2

div#hover と div.btn を併せ持つ要素がカーソルに触れた時、色を変えたいということですよね？
xminix様のコードですと

div#hover:hover div.btn {
  (略)
}

となっていますが、このコードでは、div#hoverをホバーした時の 子孫要素 div.btnという意味合いになってしまいます。

併せ持ちの意味合いandを持たせたいのであれば

div#hover:hover.btn {
  (略)
}

このようにする必要があるかと思います

追記：
手前の環境では問題を再現できませんでしたので、一部手直ししたコードを貼っておきます。コピペで改善すれば自分のコードと見比べてみてください。

div.red_btn {
  padding: 10px
}
div.btn{
  background-color: #fff;
  /*padding: 16px 0;*/無効化
  text-align: center;
  color: #000;
  border-radius: 3em;
  max-width: 200px;
}
.small_btn {
  margin-top: 20px!important;
}
div#hover:hover.btn {
  background-color: blue;
  color: #fff;
  border: solid 2px blue;
  padding: 20px 40px;
  padding-top: 10px;
}

直した場所について少しだけ書いておきます。

元コード
 div .btn {}
現コード
 div.btn {}

元のコードでは、divの子孫要素.btnになってしまいます。

元コード
 div#hover:hover.btn {
  border: solid 2px vlue;
 }
現コード
 div#hover:hover.btn {
  border: solid 2px blue;
}

シンプルにスペルミスです。

経験上、「デベロッパーツールがおかしい！」と思っても、大抵の場合ちょっとしたスペルミスや考え違いです。まずツールの不具合は考えにくいかと思います。

念の為、他のブラウザで試してみるのも手だと思います。
一から書き直すのも...手だと...思います...

Comments

[xminimx]

ご指摘いただいた内容で直してみました。
子孫要素について理解が浅いので非常に為になります、ありがとうございます。
ただ修正したあとも開発者ツールで確認したら問題なくhoverが反映されるのですが、
開発者ツールを閉じると効かなくなってしまいます…
併せ持ちのandをもたせたいというよりは、複数クラスを指定したことでhoverが反映されていない（他のクラスに負けている）かどうかを確認したいのです。

[azuapricot]

「開発者ツールを閉じると効かなくなる」　
→実コードが編集されてるわけじゃないからそりゃ更新とかしたら効かなくなるけどそこらへんはわかってますよね？さすがに・・・
あとはキャッシュのクリアとか試しましたか？

[xminimx]

実コード編集→更新→開発者ツールで確認（localhost）という手順で行なっています。
キャッシュのクリアや、他の部分を一緒に変更したりして確認もしていますがhoverだけ変わりません涙

Answer 3

（開発者ツールとブラウザの動作が違うことはよくあることなのでしょうか。)

開発ツール、そしてブラウザによっては軽微な構文ミス（例えば閉じ忘れ）をいい感じに調整してくれることがあります。

.small_btn {
    margin-top: 20px!important;

div#hover:hover div.btn{

.small_btn閉じ忘れてますね。

Comments

[xminimx]

ご指摘ありがとうございます。
こちらに引用する際にコピペし損ねていたたようで、実際のコードでは閉じていました。

[m.ts10806]

なるほど。では質問本文のコードを修正しておいてください。
ただ既に別の指摘があるようにCSSに対応するhtmlがありませんので、
そちらも併せて調整願います。

[xminimx]

htmlと併せ修正いたしました。

[m.ts10806]

div#hover:hover div.btn
↓
div#hover:hover.btn

だと思います。
スペースあけるとそれは「配下の要素」を指すことになります。

[xminimx]

ご指導ありがとうございます。
他の方にいただいたアドバイスと一緒に試してみましたが、やはり開発者ツールでしか効きません…
要素同士の関係をもっと見返してみます。

[m.ts10806]

手元では変わってます。
hoverで青くなります。

[xminimx]

お返事遅くなりすみません。
mix-peachさんのおっしゃる通り記載していない他のスタイルに負けているのかもしれません。

[m.ts10806]

!important つけてみて適用されるようであれば他の影響を受けてると言えますね

[xminimx]

早朝のアドバイスありがとうございます。
朝一番で!importantをつけてみましたが、適用されませんでした。
上に親要素が被っていてhoverが無効化されていることを考え、検収しています。

[m.ts10806]

ひとまず再現するコードを追記してください（質問のコードを更新するのではなく「現状」として追記してください）