html,css,jQueryを使用してコーディングしています。
###発生している問題
navbarのリストのsurfboadをhoverした際にmodalを表示させ、
modalのリストを選択する際も表示させたいのですが、
surfboadをhoverし表示されたmodalへカーソルを移動する際に一度modalが消えてしまいます。
###実現したいこと
カーソルを移動する際もmodalを消さずに表示させたい。
ご回答宜しくお願い致します。
補足情報
bootstrapを使用しています。
該当のソースコード
html
1<!doctype html> 2<html lang="ja"> 3 4<head> 5 <!-- Required meta tags --> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 9 <!-- Bootstrap CSS --> 10 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" 11 integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> 12 13 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 14 15 <title>shop</title> 16 17 <link rel="stylesheet" href="style.css"> 18 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 19</head> 20 21<body> 22 <!-- Navigation --> 23 <nav class="navbar navbar-expand-md bg-light fixed-top "> 24 <a href="#" class="navbar-brand"><img src="img/logo.png" alt=""> 25 </a> 26 27 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> 28 <span class="navbar-toggler-icon"></span> 29 </button> 30 31 <div class="collapse navbar-collapse justify-content-center"> 32 <ul class="navbar-nav "> 33 <li class="nav-item "> 34 <a href="#" class="nav-link ">HOME</a> 35 </li> 36 <li class="nav-item surfboard-modal-open" id="surfboard-modal-open"> 37 <a href="#" class="nav-link" >SURFBOARDS</a> 38 </li> 39 <li class="nav-item"> 40 <a href="#" class="nav-link">BLOG</a> 41 </li> 42 <li class="nav-item"> 43 <a href="#" class="nav-link">BEER</a> 44 </li> 45 <li class="nav-item"> 46 <a href="#" class="nav-link">INTERNATIONAL</a> 47 </li> 48 <li class="nav-item"> 49 <a href="#" class="nav-link nav-modal-open">STORE</a> 50 </li> 51 </ul> 52 </div> 53 54 <div class="nav-icon"> 55 <i class="fas fa-search"></i> 56 <i class="far fa-user-circle"></i> 57 <i class="fas fa-shopping-cart"></i> 58 <span class="navbar-text">$0.00</span> 59 </div> 60</nav> 61<!-- End Navigation --> 62 63 64<!-- start nav-modal-surfboard --> 65<div class="nav-modal-surfboard surfboard-modal-open" id="nav-modal-surfboard"> 66 <div class="contain"> 67 <div class="item item-1"><a href="">Stock Boards</a></div> 68 <div class="item item-2"><a href="">Surfboard Models</a></div> 69 <div class="item item-3"><a href="">Demo Boards</a></div> 70 <div class="item item-4"><a href="">Art Boards</a></div> 71</div> 72</div> 73<!-- end nav-modal-surfboard --> 74 75 76 <script src="script.js"></script> 77 78 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 79 80 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 81 integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 82 crossorigin="anonymous"></script> 83 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" 84 integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" 85 crossorigin="anonymous"></script> 86</body> 87 88</html>
css
1html { 2 font-size: 62.5%; 3} 4 5body { 6 font-size: 1.6rem; 7 margin-top: 80px; 8} 9 10 11/* navigation */ 12nav{ 13 height:8rem ; 14} 15 16.navbar-brand img{ 17 padding: 1rem; 18} 19 20.navbar-nav{ 21 margin-top: 2rem; 22} 23 24.nav-item{ 25 padding-bottom: 2.5rem; 26} 27 28.nav-link { 29 color: #000000; 30 font-weight: bold; 31 letter-spacing: 0.2rem; 32 margin-left: 2.0rem; 33} 34 35.nav-icon{ 36 margin-right: 0.5rem; 37} 38 39.nav-icon i{ 40 font-size: 2.0rem; 41 margin-right: 2.0rem; 42} 43 44nav a:hover{ 45 color: rgb(196, 164, 25); 46} 47 48nav i:hover{ 49 color:rgb(196, 164, 25) ; 50} 51 52 53/* nav-modal-surfboard */ 54.nav-modal-surfboard{ 55 width: 100%; 56 background-color: #000000; 57 padding: 2rem 0; 58 position: absolute; 59 top: 8rem; 60 z-index: 1; 61 display: none; 62} 63 64.nav-modal-surfboard .contain{ 65 padding-left: 49rem; 66} 67 68.nav-modal-surfboard .item{ 69 margin-bottom: 1rem; 70} 71 72.nav-modal-surfboard .item-1{ 73 margin-top: 1rem; 74} 75 76.nav-modal-surfboard a{ 77 color: white; 78} 79 80.nav-modal-surfboard a:hover{ 81 color: rgb(196, 164, 25); 82 text-decoration: none; 83}
jQuery
1$(function(){ 2 $('.surfboard-modal-open').hover( 3 function(){ 4 $('#nav-modal-surfboard').fadeIn(); 5 }, 6 function(){ 7 $('#nav-modal-surfboard').fadeOut(); 8 } 9 ); 10 11});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/08 12:47
2020/12/08 13:19