質問: ### 前提・実現したいこと cssで記述したdisplay:none;をjQueryのhoverによってマウスが触れている間だけ解除したいができない ### 該当のソースコード ``` テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト →元サイト テキストテキストテキスト ソースコード ``` ``` .por-box{ height: 400px; margin-top: 50px; font-family: Work Sans; } .por-box .box-shadow{ border-radius: 10px; } .airb1{ background-image: url(../img/airbnb1.png); width: 60%; margin-left: 150px; background-size: cover; height: 100%; } .black-label{ width: 100%; height: 100%; border-radius: 10px; background-color: rgba(0, 0, 0, 0.8); color: #fff; } #black-label1{ display: none; } ソースコード ``` ``` $(function() { //マウスを乗せたら発動 $('#black-label1').hover(function() { $(this).css('display', 'block'); //ここにはマウスを離したときの動作を記述 }, function() { $(this).css('display', 'none'); }); }); ソースコード ``` ### 試したこと display:none;用のクラスを作り、jQueryでremoveClassとaddClassを使ってやってみたがうまくいかなかった。 試しに条件を逆にして、cssのdisplay:none;を消してからaddClass,removeClassの順で組むとやりたいことの反対の動きではあるが動いた。 ### 補足情報(FW/ツールのバージョンなど) html5 css3 bootstrap4 jQuery sublimetext
回答: `display:none;`とすると要素自体がHTML上からなくなるのでマウスホバーは反応しません。 非表示にするものとして `visibility: hidden;` というのもありますが、これは要素自体はあるのですが表示されない状態となります。残念ながらこれもマウスホバーには反応しません。 親要素のマウスホバーで表示/非表示を切り替えるようにすればいいでしょう。 ``` 以下略 ``` ``` $(function() { //マウスを乗せたら発動 $('#parent').hover(function() { $('#black-label1').css('display', 'block'); //ここにはマウスを離したときの動作を記述 }, function() { $('#black-label1').css('display', 'none'); }); }); ```