Prompt the css or jquery method so that when you hover a block that lies far from the induced one, it changes. When you hover on the arrow you need to go out the block under the phone, which is higher order than the arrow. Site viniry.kz

$(document).ready(function() { $(".arrowbot").hover(function() { $('.test4').css("display", "block"); }, function() { $('.phones4').css("display", "none"); }); }); $(document).ready(function() { $(".test4").hover(function() { $('.test4').css("display", "block"); }, function() { $('.phones4').css("display", "none"); }); }); 
 .test4 { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="address-col addresshello"> <div class="address"> <svg class="address-svg" version="1.1" id="map_layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 139 139" style="enable-background:new 0 0 139 139;" xml:space="preserve"> <path style="fill:#545BFF;stroke:#545BFF;stroke-miterlimit:10;" d="M69.5,19.3c-19.44,0-35.2,15.76-35.2,35.2s15.76,35.2,35.2,35.2s35.2-15.76,35.2-35.2S88.94,19.3,69.5,19.3z M69.5,75.3c-11.488,0-20.8-9.313-20.8-20.8c0-11.488,9.312-20.8,20.8-20.8s20.8,9.312,20.8,20.8C90.3,65.987,80.988,75.3,69.5,75.3 z"></path> <path id="XMLID_8_" style="fill:#545BFF;" d="M69.5,121c-0.9,0-2.2-1.3-2.2-1.3c-38-43.7-33-65.2-33-65.2s11,35.1,35.2,35.2"></path> <path id="XMLID_6_" style="fill:#545BFF;" d="M69.5,121c0.9,0,2.2-1.3,2.2-1.3c38-43.7,33-65.2,33-65.2s-11,35.1-35.2,35.2"></path> </svg> <span>Сулейменова, 24а</span> <div class="arrowbot"></div> <div class="vc_col-xs-5 phones4 right"> <a href="tel:+77272777444" title="">+7 (727) 277-74-44</a> <a href="tel:+77057773058" title="">+7 (705) 777-30-56</a> </div> </div> <div class="vc_row test4"> <div class="scheme"> <div class="go-scheme scheme4"> <a href="#yandex_map" data-coordx="43.212036" data-coordy="76.877984"> <svg enable-background="new 0 0 24 24" height="24px" id="venicle_layer_2" version="1.1" viewBox="0 0 24 24" width="24px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g> <rect height="1" width="10" x="7" y="16"></rect> <rect height="1" width="10" x="7" y="18"></rect> <path d="M24,12v-1c0-0.6-0.4-1-1-1h-1.3L21,6c0-0.6-0.4-1-1-1H4C3.4,5,3,5.4,3,6l-0.7,4H1c-0.6,0-1,0.4-1,1v1 c0,0.4,0.3,0.8,0.6,0.9C0.2,13.5,0,14.2,0,15v6c0,0.6,0.4,1,1,1h1v1c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1v-1h10v1c0,0.6,0.4,1,1,1h3 c0.6,0,1-0.4,1-1v-1h1c0.6,0,1-0.4,1-1v-6c0-0.8-0.2-1.5-0.6-2.1C23.7,12.8,24,12.4,24,12z M5,7h14l0.8,5H4.2L5,7z M1,12v-1h1.2H3 v1H1.4H1z M6,23H3v-1h3V23z M21,23h-3v-1h3V23z M22,20H2v-5c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2V20z M21,12v-1h0.8H23v1h-0.4H21z"></path> <path d="M4,19h1c0.6,0,1-0.4,1-1v-1c0-0.6-0.4-1-1-1H4c-0.6,0-1,0.4-1,1v1C3,18.6,3.4,19,4,19z M4,17h1v1H4V17z"></path> <path d="M19,19h1c0.6,0,1-0.4,1-1v-1c0-0.6-0.4-1-1-1h-1c-0.6,0-1,0.4-1,1v1C18,18.6,18.4,19,19,19z M19,17h1v1h-1V17z"></path> </g> </svg> <span>схема проезда</span> </a> </div> </div> </div> </div>

  • one
    there is no need to constantly link to third-party resources. Add a code showing the problem to the question. - teran
  • do not rush to publish the question, think about those who read it later - Alex

1 answer 1

Option 1. If you want to hide / show blocks:

 $(document).ready(function() { $(".arrowbot").hover(function() { $('.test4, .phones4').toggle(); }, function() { $('.test4, .phones4').toggle(); }); }); 
 .test-block { display: flex; } .test-block div { margin-right: 5px; } .test4 { display: none; width: 150px; border: 1px solid; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"> <div class="test-block"> <div class="icon"><i class="fas fa-map-marker-alt"></i></div> <div class="address">Какой-то адрес</div> <div class="arrowbot"><i class="fas fa-angle-down"></i></div> </div> <div class="phones4"> <a href="tel:+77272777444" title="">+7 (727) 277-74-44</a> <a href="tel:+77057773058" title="">+7 (705) 777-30-56</a> </div> <div class="test4"> Карта со схемой проезда </div>

Option 2. If you need to hide / show blocks, but prohibit / cancel these actions if the user pointed at a block with a map:

 $(document).ready(function() { $(".arrowbot").hover(function() { clearTimeout($(".arrowbot").data('timeout')); $('.test4').css("display", "block"); $('.phones4').css("display", "none"); }, function() { let timeout = setTimeout(function() { $('.phones4').css("display", "block"); $('.test4').css("display", "none"); }, 100); $(".arrowbot").data('timeout', timeout); }); }); $('.test4').hover(function() { clearTimeout($(".arrowbot").data('timeout')); }, function() { let timeout = setTimeout(function() { $('.phones4').css("display", "block"); $('.test4').css("display", "none"); }, 100); $(".arrowbot").data('timeout', timeout); }); 
 .test-block { display: flex; } .test-block div { margin-right: 5px; } .test4 { display: none; width: 150px; border: 1px solid; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"> <div class="test-block"> <div class="icon"><i class="fas fa-map-marker-alt"></i></div> <div class="address">Какой-то адрес</div> <div class="arrowbot"><i class="fas fa-angle-down"></i></div> </div> <div class="phones4"> <a href="tel:+77272777444" title="">+7 (727) 277-74-44</a> <a href="tel:+77057773058" title="">+7 (705) 777-30-56</a> </div> <div class="test4"> Карта со схемой проезда </div>