How can I hide jQuery hover

Question

I'm doing User Login and after doing I want the first form to be hidden and only the other field to be visible. Since I was browsing at first, it always sees it as display:block, how can I avoid this? Can anyone help with this?

So in short, how can I hide my login panel after logging in?

Thank you advance.

$(document).ready(function(){
$(".login-user").click(function () {
   $("#container").append('<div class="appendme">User Login Success</div>');
});

  $('#btn , .login, myAccount').mouseover(function(){ 
  if (jQuery('div').hasClass('appendme')){
  $('.login').css('display','none');
  $('.myAccount').css('display','block');
  }
    $('.login').show();
  }).mouseout(function(){     
    $('.login').hide();
  });    

});

.login, .myAccount{
  width:300px;
  height:auto;
  border:1px solid #CCC;
  display:none;
}
#btn{
  width:300px;
}
.appendme{
display:none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <button id="btn">
    My Account
  </button>
  <div class="login"> 
    Login Panel
    <button class="login-user">Login</button>
  </div>
  <div class="myAccount"> 
    <ul>
    <li>My account Edit</li>
    <li>My Wishlist</li>
    <li>My Orders</li>
    </ul>
  </div>
</div>

After logging in, I don't want the login panel to appear when navigating my account. I just want myAccount class to appear — JFeel
– JFeel, Commented Nov 3, 2021 at 10:12
When login is pressed I just create a div and a class, for example if there is such a class then the user is logged in. — JFeel
– JFeel, Commented Nov 3, 2021 at 10:22
Pressing login doesn't necessarily mean that the user is logged in, right? — prettyInPink
– prettyInPink, Commented Nov 3, 2021 at 10:23

prettyInPink · Accepted Answer · 2021-11-03 10:33:41Z

You could use $('.login').remove();, but you should check how and when a user is logged in, and not make it dependable on a simply click event.

$(document).ready(function(){
$(".login-user").click(function () {
   $("#container").append('<div class="appendme">User Login Success</div>');
   $('.login').remove();
});

  $('#btn , .login, myAccount').mouseover(function(){ 
  if (jQuery('div').hasClass('appendme')){
  $('.login').css('display','none');
  $('.myAccount').css('display','block');
  }
    $('.login').show();
  }).mouseout(function(){     
    $('.login').hide();
  });    

});

.login, .myAccount{
  width:300px;
  height:auto;
  border:1px solid #CCC;
  display:none;
}
#btn{
  width:300px;
}
.appendme{
display:none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <button id="btn">
    My Account
  </button>
  <div class="login"> 
    Login Panel
    <button class="login-user">Login</button>
  </div>
  <div class="myAccount"> 
    <ul>
    <li>My account Edit</li>
    <li>My Wishlist</li>
    <li>My Orders</li>
    </ul>
  </div>
</div>

Collectives™ on Stack Overflow

How can I hide jQuery hover

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related