Как сделать появление/скрытие блока?

238

16 марта 2018, 11:58

Подскажите метод css или jquery чтобы при наведении блок, который лежит далеко от наведенного, изменялся. При наведении на стрелку необходимо, чтобы выходил блок под телефонами, который выше порядком чем стрелка. Сайт 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>

Answer 1

Вариант 1. Если нужно скрывать/отображать блоки:

$(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>

Вариант 2. Если нужно скрывать/отображать блоки, но запретить/отменить данные действия если пользователь навел на блок с картой:

$(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>