初投稿なので見ずらかったらすみません。
タイトルの通り、JQueryのhoverアクションでcssで作成したデザインにカーソルが乗った時と離したときに発生するアクションの備忘録です。
下記のように大きい箱の中に小さい箱が入っているデザインを作成し、
その小さい箱にカーソルが乗ったら小さく、カーソルが外れたら元の大きさに戻るようにしたときの記録です。
sample.html
<divclass="main-box"><divclass="sub-box"><p>箱</p><divclass="hover"></div></div><divclass="sub-box"><p>箱</p><divclass="hover"></div></div><divclass="sub-box"><p>箱</p><divclass="hover"></div></div></div></div>sample.css
.main-box{align-items:center;background:#fff;border-radius:10%;display:flex;flex-wrap:wrap;height:380px;margin:auto;width:380px;}.sub-box{margin-left:auto;margin-right:auto;text-align:center;}.hover{background:#000;border:#fffsolid1px;border-radius:10%;width:100px;height:100px;}さて、ここでJQueryのhoverアクションを記述するのですが、
sample.js
$(function(){$(".hover").hover(function(){$(this).css("height","80px");$(this).css("width","80px");},function(){$(this).css("height","100px");$(this).css("width","100px");});});最初はこのようにJQueryを記述しましたが、箱が小さくなった時に下記のように隣接する別の箱との距離が近くなってしまいました。
※若干ですが、小さくなった箱に隣の箱が寄ってしまいます。高速でカーソルを乗せたり離したり繰り返すとすごく気持ち悪いです。
そこで、マウスが乗った時にmargin-right,leftも変更するように記述し、箱の大きさ100pxを変えないようにしてみました。
sample.js
$(function(){$(".hover").hover(function(){$(this).css("height","80px");$(this).css("width","80px");$(this).css("margin-left","10px");//左右で２０px減る分を補う$(this).css("margin-right","10px");//左右で２０px減る分を補う},function(){$(this).css("height","100px");$(this).css("width","100px");$(this).css("margin-left","0px");$(this).css("margin-right","0px");});});こうすると、小さくなった分をmarginが補うため小さい箱全体の大きさが変わりませんでした。
これで小さくなっても均等を保持することに成功しました。
恐らく、箱のCSSもJQueryもこんなやり方でなくてももっとシンプルなコードで実装はできると思いますが、こんな形で解決させました。では！