Show a div if i hover hyperlink-Twitter bootstrap

Tibi458
March 19, 2020
264 views
1 vote
2 Answers

If i hover the .header_kosar_link, the .cart_hover div will be displayed. Now, it will be displayed by jquery, with the code below.

How can i make the div showned, when i move the cursor into it?

.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>

The .cart_hover div has this 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);

Answers

You can solve this easily by CSS. No need for javascript/JQuery. Just add a :hover selector on the parent element. I would also advice to use visibility instead of 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>

You can achieve this by using combination of ~ and nth-of-type, note that I added class cart-container, notice that my selector is on the parent of the <a> tag:

.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>

Please signup or login to give your own answer.

Click here to cancel reply.