CSS hoverを併用したい

style=""内にbackgroundを指定するとhoverの変更が無効になります
定義の仕方を変えずにhoverで色を変える方法はないのでしょうか？

<div style="background-color:black;width:100%;height:50px" class="h">a</div>

<style>
  .h {
    transition: all 0.3s ease;
  }
  .h:hover {
    background-color: red;
  }
</style>

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

回答2件

style属性を外せないのであれば、cssで!importantでドーピングしないと勝てません

投稿2022/11/10 02:11

yambejp

総合スコア114769

arfhjf

2022/11/10 02:32

importantは今後非推奨になる可能性はありますでしょうか？

yambejp

2022/11/10 02:37

現時点でも毛嫌いする人が多い機能ですね。すべてをCSSに集約できるのであれば使わないようにしたいところですとはいえstyle属性があるかぎりトレードオフで必要な機能です

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

ベストアンサー

CSSの詳細度から、htmlタグの中にstyle属性で指定した方が優先されてききます。
ですので、<style>タグの中に書いた方は非優先のため、赤色になりませんでした。

このままの構造で行きたいのであれば、!importantをつけてください。

html
1<div style="background-color:black;width:100%;height:50px" class="h">a</div>
2
3<style>
4  .h {
5    transition: all 0.3s ease;
6  }
7  .h:hover {
8    background-color: red !important;
9  }
10</style>