如何使用jQuery实现hover效果并在登录后隐藏登录面板

API 探路者

2026-9-27

问题修复方案

现有代码核心问题

逻辑冲突：mouseover事件中if判断后额外执行了$('.login').show()，无论是否登录最终都会强制显示登录面板，是你遇到display:block无法隐藏的直接原因
选择器错误：事件绑定的myAccount缺少类选择器前缀.，导致个人中心区域事件绑定失效
状态切换不及时：登录成功后仅新增了标记元素，没有立刻切换面板显示状态，需要等待下次mouseover触发才会更新
查询效率低：jQuery('div').hasClass('appendme')会遍历页面所有div元素，性能消耗不必要

修复后完整代码

JavaScript 代码

$(document).ready(function(){
  // 页面初始化校验登录状态（可选，实现刷新后保留登录态）
  if (localStorage.getItem('isLogin') === 'true') {
    $('.login').hide();
    $('.myAccount').show();
  }

  // 登录按钮点击逻辑
  $(".login-user").click(function () {
    $("#container").append('<div class="appendme">User Login Success</div>');
    // 存储登录状态到本地存储（可选）
    localStorage.setItem('isLogin', 'true');
    // 登录成功立即切换面板显示
    $('.login').hide();
    $('.myAccount').show();
  });

  // 补全.myAccount的类选择器前缀
  $('#btn , .login, .myAccount').mouseover(function(){ 
    // 直接判断登录标记是否存在
    if ($('.appendme').length > 0 || localStorage.getItem('isLogin') === 'true') {
      $('.login').hide();
      $('.myAccount').show();
    } else {
      // 仅未登录状态下显示登录面板
      $('.login').show();
    }
  }).mouseout(function(){     
    // 鼠标移出后隐藏所有面板
    $('.login, .myAccount').hide();
  });    
});

CSS和HTML代码无需修改，保持原有内容即可。