【問題】「画像はリンクホバーa:hoverが効くのにdivはきかない!?」
【解決回答】div要素に聞かせたいホバーはcssにdisplay: block;を追記。
いつもは画像素材を用いて、その素材をホバーで変色させることが多かったのですが、
以下のようなhtmlに:hoverでカーソルを乗せた時にdiv要素を少し透明にしようとしたら効かず。
scssファイルを考え直す。
元コード
.html
<div>
<a href="/xxx/xxx">
<div class="div-btn"><span>詳細はこちら</span></div>
</a>
</div>
.scss
a:hover {
opacity: 0.6;
}
解決コード
scssにdisplay: block;を追記
a:hover {
opacity: 0.6;
+ display: block;
}
display: block;で親要素のサイズに合わせることができるらしい。