jQuery实现hover与点击控制文本显隐功能问题求解

我们需要新增一个状态变量来标记第二部分文本是否被锁定为常显状态，鼠标移出时仅在未锁定的情况下隐藏文本即可实现需求。

修改后JS代码 #

// 新增锁定状态标记，初始为未锁定
let isPinned = false;
const $secondP = $("p:nth-child(2)");

// hover显隐逻辑
$("div").mouseover(function() {
  $secondP.css("display", "block");
});

$("div").mouseout(function() {
  // 仅未锁定时才隐藏
  if (!isPinned) {
    $secondP.css("display", "none");
  }
});

// 点击切换锁定状态逻辑
$("p:nth-child(1)").click(function() {
  isPinned = !isPinned;
  if (isPinned) {
    // 锁定后强制显示
    $secondP.css("display", "block");
  } else {
    // 解锁后如果当前没有hover则隐藏，保持hover逻辑正常
    if ($('div:hover').length === 0) {
      $secondP.css("display", "none");
    }
  }
});

可选优化CSS（给第一部分文本加点击提示） #

p:nth-child(2) {
  display: none;
}
p:nth-child(1) {
  cursor: pointer;
}

HTML代码无需修改 #

代码逻辑完全匹配需求：

• hover第一部分文本时第二部分正常显示，移出时未锁定状态下正常隐藏
• 第一次点击第一部分文本后isPinned变为true，第二部分文本强制常显，不受hover移出影响
• 再次点击第一部分文本后isPinned变为false，恢复到hover触发显隐的初始状态

内容的提问来源于stack exchange，提问作者Anna_B