CODEWITHSUNDEEP
javascriptjqueryhtml
user11496081
user11496081

Reputation:

Hide/Show HTML element on mouseenter/mouseleave

A page has a <li>. When a customer enters the mouse into <li> area, another <ul> pops up (showing cart items). I can't figure out how to hide this <ul> when user moves the mouse out of <ul> area.

Here is jQuery code I tried: 

$("#cartLi")
    .mouseenter(function () {
        $.post("/ShoppingCart/cartDropDown",
            function (data) {
                $('.cart-skeleton').replaceWith(data);
                $('.cart-dropdown').css('display', 'inline-block');

            })
    });
$("#cartLi")
    .mouseleave(function () {
            $('.cart-dropdown').css('display', 'inline-block');
    })

$(".cart-dropdown")
    .mouseenter(function () {
        $('.cart-dropdown').css('display', 'inline-block');
    });

$(".cart-dropdown")
.mouseleave(function () {
        if ($('.cart-dropdown').css.display == 'inline-block') {
            $('.cart-dropdown').css('display', 'none');
        }
    });

HTML:

<li class="catalogue-specials" id="cartLi">    
    <a href="#" id="btnLastOption">
 My Cart
</a>    
</li>
<ul class="cart-dropdown">
</ul>

Upvotes: 2

Views: 467

Answers (3)

muka.gergely
muka.gergely

Reputation: 8329

Here's a solution with a mockup JSON:

$("#cartLi")
  .mouseenter(function() {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(function(response) {
        return response.json();
      })
      .then(function(myJson) {
        myJson.forEach(item => {
          let html = `<li class="catalogue-specials"><a href="#">${item.id}. ${item.title}</a></li>`;
          $(".cart-dropdown").append(html);
          $('.cart-dropdown').css('display', 'inline-block');
        })
      });
  })

$(".cart-dropdown")
  .mouseleave(function() {
    if ($('.cart-dropdown').css('display') === 'inline-block') {
      $('.cart-dropdown').css('display', 'none');
    }
  });
.cart-dropdown {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li class="catalogue-specials" id="cartLi">
    <a href="#" id="btnLastOption">My Cart</a>
  </li>
</ul>

<ul class="cart-dropdown">
</ul>

The problem is $('.cart-dropdown').css.display == 'inline-block' is incorrect, it should be $('.cart-dropdown').css('display') == 'inline-block'.

And I also suggest that you start using fetch instead of $.post(), $.get(), $.ajax() - fetch is native, $.something() is not, and also has quite good browser support.

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

If you cannot use fetch() (e.g. because of structure, or other requirement / condition), then here's the snippet with $.get():

$("#cartLi")
  .mouseenter(function() {
    $.get({
      url: 'https://jsonplaceholder.typicode.com/posts',
      contentType: 'application/json; charset=utf-8',
      success: function(response) {
        let html = ''
        response.forEach(item => {
          html += `<li class="catalogue-specials"><a href="#">${item.id}. ${item.title}</a></li>`;
        })
        $(".cart-dropdown").append(html);
        $('.cart-dropdown').css('display', 'inline-block');
      }
    })
  })

$(".cart-dropdown")
  .mouseleave(function() {
    if ($('.cart-dropdown').css('display') === 'inline-block') {
      $('.cart-dropdown').css('display', 'none');
    }
  });
.cart-dropdown {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li class="catalogue-specials" id="cartLi">
    <a href="#" id="btnLastOption">My Cart</a>
  </li>
</ul>

<ul class="cart-dropdown">
</ul>

Upvotes: 0

yuko
yuko

Reputation: 325

Here is a solution that uses hide() and show().

jQuery:

$("#cartLi").mouseenter(function () {
    $.post("/ShoppingCart/cartDropDown", function (data) {
        $('.cart-skeleton').replaceWith(data);
    });
    $('.cart-dropdown').show();
});

$(".cart-dropdown").mouseleave(function () {
    $('.cart-dropdown').hide();
});

Upvotes: 0

Ricky
Ricky

Reputation: 498

Take a look this works. :) Check if this is your requirement or not? 

$(document).ready(function(){
$('.cart-dropdown').hide();
});

$("#btnLastOption").mouseenter(function(){
    
        $('.cart-dropdown').show();
    });

$(".cart-dropdown").mouseleave(function(){
 $('.cart-dropdown').hide();
});

   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="catalogue-specials" id="cartLi">    
    <a href="#" id="btnLastOption">
 My Cart
</a>    
</li>
<ul class="cart-dropdown">
<li>hsds</li>
<li>jshd</li>
</ul>

Upvotes: 2

Related Questions