:hoverが適用されない

Question

マウスを要素の上に載せても「:hover」が適用されません。
原因が分からないため、ご助言頂けましたら幸いです。
以下は該当部分のコードになります。

<h1 class="choose_purpose">来院目的を選択してください</h1>
  <a class="choose_btn" href="#">初めての来院(初めて〇〇病院に来院される患者様)</a>
  <a class="choose_btn" href="#">診察・予防</a>

.choose_btn:hover{
  margin: 0 auto;
  margin-left: 55px;
  margin-bottom: 8px;
  color: #fff;
  background-color: #fc8205;
  border-radius: 3px;
  /* background: -webkit-linear-gradient(top, #f69000 50%, #fdb140); */
  box-shadow: 0px 0px 2px #7e8183e6;
  border:1px solid #c59336;
  font-size:14px;
}
.choose_btn{
  cursor:default;
  margin: 0 auto;
  margin-left: 55px;
  margin-bottom: 8px;
  color: #fff;
  background-color: #fc8205;
  border-radius: 3px;
  background: -webkit-linear-gradient(top, #f69000 50%, #fdb140);
  box-shadow: 0px 0px 2px #7e8183e6;
  border:1px solid #c59336;
  font-size:14px;
  display:block;
  text-decoration:none;
}

該当の部分の表示画面は以下になります

現在の状態としましては、マウスカーソルを乗せてもliner-gradientが消えずカーソルが要素の上に乗った際のアクションが発生していない状況です。

Comments

[m.ts10806]

実現したいことを分かりやすく具体的に書いてもらわないと後付け後付けで何度もやりとりが発生します。
そこを雑にしないでください。意識してるのかしてないのか分かりませんが、回答者を振り回す結果になっています。
teratailはサポートセンターではありません。
https://teratail.com/help/question-tips#questionTips1-1

Answer 1

「.choose_btn:hover」に書かれている内容はすべて「.choose_btn」に
含まれています

追記

hover時にliner-gradientを付けなくするにはどのようにすれば良いのでしょうか...?

なるほどようやくわかりました:hoverでコメントアウトしたところを外したいのですね？

.choose_btn:not(:hover){
  background: -webkit-linear-gradient(top, #f69000 50%, #fdb140);
}
.choose_btn{
  cursor:default;
  margin: 0 auto;
  margin-left: 55px;
  margin-bottom: 8px;
  color: #fff;
  background-color: #fc8205;
  border-radius: 3px;
  box-shadow: 0px 0px 2px #7e8183e6;
  border:1px solid #c59336;
  font-size:14px;
  display:block;
  text-decoration:none;
}

コピペ用

<style>
.choose_btn:not(:hover){
  background: -webkit-linear-gradient(top, #f69000 50%, #fdb140);
}
.choose_btn{
  cursor:default;
  margin: 0 auto;
  margin-left: 55px;
  margin-bottom: 8px;
  color: #fff;
  background-color: #fc8205;
  border-radius: 3px;
  box-shadow: 0px 0px 2px #7e8183e6;
  border:1px solid #c59336;
  font-size:14px;
  display:block;
  text-decoration:none;
}
</style>
<h1 class="choose_purpose">来院目的を選択してください</h1>
<a class="choose_btn" href="#">初めての来院(初めて〇〇病院に来院される患者様)</a>
<a class="choose_btn" href="#">診察・予防</a>

Comments

[toll_tree]

ご回答ありがとうございます。
すみません。それはつまりどういうことでしょうか...?
仮に、hover時にliner-gradientを付けなくするにはどのようにすれば良いのでしょうか...?

[yambejp]

追記分を確認ください

[toll_tree]

追記頂きありがとうございます。
今、CSSファイルに:hover時のCSSを削除し、新たに
「.choose_btn:not(:hover){
background: -webkit-linear-gradient(top, #f69000 50%, #fdb140);
}」こちらを書き加え実行してみました。
しかし、hover時にもliner-gradientは削除されず、「choose_btn」に適用しているCSSのbackgroundプロパティのliner-gradientにhover前から斜線が引かれてしまっている状況です。同じくbackground-colorもです。しかし、グラデーションはかかっているといった、状況になってしまっています...

[toll_tree]

＞:hoverでコメントアウトしたところを外したいのですね？
はい。分かりにくくて、申し訳ないです。

[yambejp]

「liner-gradient」？
typoしてないかよくよくチェックしてみてください

[toll_tree]

すみません。「liner-gradient」は打ち間違えです。「linear-gradient」でした。
ですが、CSSファイルの方は、(linear-gradient)と正確に記述できていました。

[yambejp]

おかしいですね・・・
ソース自体変わりませんがコピペ用のものをコピーして
これだけ書かれたファイルを参照してみてください
どうしても反映されないなら検証環境(OSやブラウザの種類とバージョン)
を提示ください

[toll_tree]

今、コピペ用のコードで試してみましたら、反映されました...
「.choose_btn」には、「background: -webkit-linear-gradient(top, #f69000 50%, #fdb140);」
こちらの指定はしていなかったのですね...見落としてしまっていました...
「choose_btn:not(:hover)」で指定したCSSはhover時のみ、外すだけでなく、hoverされていない状態にも、適用されるといった感じなのでしょうか...?

[yambejp]

なるほど、反映されたようでなによりです

> 「choose_btn:not(:hover)」で指定したCSSはhover時のみ、外すだけでなく、hoverされていない状態にも、適用される

素直に読んで、「hoverされていないchoose_btnクラス」に適用なので
その認識であっています

[toll_tree]

ありがとうございました。

Answer 2

マウスカーソルを乗せてもliner-gradientが消えず

.choose_btnの中のCSSは、:hover状態でも適用されます。もとのCSSを.choose_btn:not(:hover)とするか、:hoverの側でbackground-image: noneのようにするかが必要です。

Comments

[toll_tree]

ご回答ありがとうございます。
つまり、hover時であっても、hover時でないCSSは適用されるのですね。
つまり、今回の場合、CSSを解除する必要があるという訳なんですね

Answer 3

.choose_btn:hover{
  background-image: none;
}
```**動くサンプル：**[https://jsfiddle.net/5hLxw870/](https://jsfiddle.net/5hLxw870/)

Comments

[toll_tree]

ご回答ありがとうございます。
background-imageをnoneにすると、background-colorも削除されるんですね。
background-image: none;こちらの指定の後に、background-colorを設定しましたら、無事、liner-gradientのみ削除された状態にできました。

Answer 4

:hoverなどは通常、デフォルトと「変えたいところだけ」指定します。

.choose_btn:hover{
  font-size:20px;
}

不要となる指定があるのでしたらnoneなどでキャンセルする必要があります。

---

PHPでもJavaScriptでもCSSでもHTMLでもなんでも同じですが、
いきなり全て詰め込もうとすると問題の切り分けができません。
CSSにもリファレンス、マニュアルがあります。
そちらを確認しつつ最小構成のコード（ミニマムコード）を組んで確認してください。
グチャッとなったコードは作っている人の頭の中そのものです。
時には問題切り分けのために現在組んでいるものを捨てる勇気も必要です。
それに、HTMLだからCSSだからと舐めていると痛い目に遭います。