Q&Ahoverした時に表示、していない時には非表示にしたいです。
.wrap {
display: none;
}
.wrapper:hover {
display: block;
}
上記のように書きましたが、うまく動いてくれません。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <!--Metaタグ--> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <link rel="stylesheet" href="style.css"> 9 <!--Bootstrap CSS--> 10 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> 11 <!--CSS--> 12 <link rel="stylesheet" href="style.css"> 13 <!--Fontawesome--> 14 <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> 15 <title>Document</title> 16</head> 17<body> 18 <div class="container1"> 19 <div class="row"> 20 <div class="col-sm-4 header-left"><a href="">来院入院の方</a> 21 <div class="wrap"> 22 <p><a href="">病院へ行く</a></p> 23 <ul class="wrapper-bottom"> 24 <li><a href="">初めて受診する方</a></li> 25 <li><a href="">通院中・再来の方</a></li> 26 <li><a href="">入院・面会の方</a></li> 27 <li><a href="">人間ドックを受診する方</a></li> 28 </ul> 29 </div> 30 </div> 31 </div> 32</div> 33<!--スマホ用のNavbar--> 34 <!--CDNでjQuery読み込む--> 35 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 36 <script type="text/javascript" src="script.js"></script> 37</body> 38</html>
css
1@charset "utf-8"; 2.wrap { 3 display: none; 4} 5 6.wrapper:hover { 7 display: block; 8}
回答2件
0
ベストアンサー
display: none;の要素ではイベントは発生しないようです。
代わりに opacity: 0;とopacity: 1;を使ってみてください。
投稿2021/05/04 12:51
総合スコア8402
0
解決方法
①itagagakiさんからご指摘いただいたように、まずwrapperというクラスはありません。
なので、wrapに書き換えつつ.header-leftを追加してhoverしたら挙動を確認できるようにします。
②そしてdisplay: none;はイベントが発生しないのでopacityを使うことにします。
コードは以下です。htmlは同じなので変わりません。
css
1.wrap { 2 opacity: 0; 3} 4 5.header-left:hover .wrap { 6 opacity: 1; 7}
これで解決です。(´ω｀)ﾖｯｼｬｰ
一口メモ：
さて、僕が知らなかったことはdisplay:none;ではイベントが発生しないということでした。
ちなみに似たような書き方でvisibility:hidden;もありますが、これもイベントは発生しません。
なので使えるのはopacityだけになります。
以下が表です。
| スタイル | 領域の確保 | クリック（イベント） |
|---|---|---|
| display:none; | x | x |
| visibility:hidden; | o | x |
| opacity:0; | o | o |
引用しただけなので、気になる場合はこちらから↓
display:none; VS visibility:hidden; VS opacity:0;
※2021/05/05追記
もっと簡単なやり方がありましたので追記します。
html
1<div class="container1 wrapper">
css
1.wrap { 2 display: none; 3} 4 5.wrapper:hover .wrap{ 6 display: block; 7}
でOKです。
✅itagagakiさんからの指摘通りwrapperがないのでcontainer1にクラスをつけ加えます。
✅そしてhoverした時に開いてほしい、.wrapper:hoverの中の.wrapと指定します。
すると出来上がりです。
この時の僕の間違いとしては、hoverした時に「来院入院の方」のクラスを指定して.wrapper:hover .header-leftにしてしまっていましたが、これだと動きません。対象となるクラスの一段下のクラスを用いて、今回であれば、wrapper:hover .wrapが正しいといえます。
以上！
投稿2021/05/04 13:39
編集2021/05/05 04:05
総合スコア120
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/04 12:53
2021/05/04 12:55
2021/05/04 12:59
2021/05/04 13:09