Показать div, если я наведу указатель мыши

Question

Если я наведу на ссылку .header_kosar_link, будет отображен div .cart_hover. Теперь он будет отображаться как jquery, с кодом ниже.

Как я могу показать div, когда я наведу на него курсор?

.cart_hover{ max-width:300px; display:none;  background:#fff; position:absolute; right:0; top:60px; z-index:999; padding:15px; border:1px solid #ccc; border-radius:5px; -webkit-box-shadow: 0 5px 16px rgba(50, 56, 77, 0.35);

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-md-2 d-flex justify-content-center justify-content-md-end align-items-center header_div">
  <a href="https://projektar.hu/kosar" title="Kosár" class="header_kosar_link d-flex align-items-center">
    <i class="fa fa-shopping-basket fejlec_kosar_ikon" aria-hidden="true"></i>
    <span id="header_kosar_text" class="header_kosar_text">Cart</span>
  </a>
</div>
<div class="clearfix"></div>
<div class="cart_hover">Cart Hover</div>


<script>
  $('.header_kosar_link').on('mouseover', function() {
    $('.cart_hover').css('display', 'block');
  });
  $('.header_kosar_link').on('mouseout', function() {
    $('.cart_hover').css('display', 'none');
  });
</script>

Div .cart_hover имеет это css:

.cart_hover{ max-width:300px; display:none;  background:#fff; position:absolute; right:0; top:60px; z-index:999; padding:15px; border:1px solid #ccc; border-radius:5px; -webkit-box-shadow: 0 5px 16px rgba(50, 56, 77, 0.35);

Answer 1

Вы можете достичь этого, используя комбинацию ~ и nth-of-type , обратите внимание, что я добавил класс cart-container, обратите внимание, что мой селектор находится на родительском элементе <a> тег:

.cart-container:hover ~ div:nth-of-type(3) {
  visibility: visibile;
  display: block;
}

.cart_hover {
	max-width: 300px;
	display: none;
	background: #fff;
	position: absolute;
	right: 0;
	top: 60px;
	z-index: 999;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
	-webkit-box-shadow: 0 5px 16px rgba(50, 56, 77, 0.35);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-md-2 d-flex justify-content-center justify-content-md-end align-items-center header_div cart-container">
  <a href="https://projektar.hu/kosar" title="Kosár" class="header_kosar_link d-flex align-items-center">
    <i class="fa fa-shopping-basket fejlec_kosar_ikon" aria-hidden="true"></i>
    <span id="header_kosar_text" class="header_kosar_text">Cart</span>
  </a>
</div>
<div class="clearfix"></div>
<div class="cart_hover">Cart Hover</div>

Answer 2

Вы можете легко решить эту проблему CSS. Нет необходимости в JavaScript / JQuery. Просто добавьте селектор :hover на родительский элемент. Я бы также посоветовал использовать visibility вместо display.

.flex-container:hover > .cart_hover {
  visibility: visible;
}

.flex-container {
  display: flex;
}

.flex-container > .d-flex {
  flex: 1 1 auto;
  background-color: blue;
  cursor: pointer;
}

.flex-container > .cart_hover {
  visibility: hidden;
}


.flex-container:hover > .cart_hover {
  visibility: visible;
}

<div class="flex-container">
  <div class="col-md-2 d-flex justify-content-center justify-content-md-end align-items-center header_div">
    <a href="https://projektar.hu/kosar" title="Kosár" class="header_kosar_link d-flex align-items-center">
      <i class="fa fa-shopping-basket fejlec_kosar_ikon" aria-hidden="true"></i>
      <span id="header_kosar_text" class="header_kosar_text"></span>
    </a>
  </div>
  <div class="clearfix"></div>
  <div class="cart_hover">CART</div>
</div>