如何实现点击下拉选项后禁用Hover效果，关闭按钮恢复Hover？

核心思路是通过添加/移除CSS类来控制下拉菜单的锁定状态：

• 点击下拉选项时，给父容器添加locked类，强制下拉菜单保持显示，并覆盖原有hover样式
• 点击关闭按钮时，移除locked类，隐藏下拉菜单，恢复原有hover交互

步骤1：修改CSS样式 #

在原有CSS基础上添加以下规则，处理锁定状态的样式：

/* 锁定状态：保持下拉菜单显示 */
.dropdown.locked .dropdown-content {
  display: block;
}

/* 锁定状态：禁用按钮的hover变色效果 */
.dropdown.locked:hover .dropbtn {
  background-color: #04AA6D;
}

步骤2：添加jQuery代码 #

用jQuery监听点击事件，实现状态切换：

$(document).ready(function() {
  // 点击下拉选项时锁定下拉菜单
  $('.dropdown-content a').click(function() {
    $(this).closest('.dropdown').addClass('locked');
  });

  // 点击关闭按钮时解除锁定并关闭下拉
  $('.dropdown-content .close').click(function() {
    const $dropdown = $(this).closest('.dropdown');
    $dropdown.removeClass('locked');
    $dropdown.find('.dropdown-content').hide();
  });
});

完整代码示例 #

最终CSS #

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content .close{
  float:right;
  cursor: pointer;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

/* 新增锁定状态样式 */
.dropdown.locked .dropdown-content {
  display: block;
}
.dropdown.locked:hover .dropbtn {
  background-color: #04AA6D;
}

HTML（无需修改） #

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <div class="close">x</div>
    <a href="#">Value 1</a>
    <a href="#">Value 2</a>
    <a href="#">Value 3</a>
  </div>
</div>

jQuery代码 #

$(document).ready(function() {
  $('.dropdown-content a').click(function() {
    $(this).closest('.dropdown').addClass('locked');
  });

  $('.dropdown-content .close').click(function() {
    const $dropdown = $(this).closest('.dropdown');
    $dropdown.removeClass('locked');
    $dropdown.find('.dropdown-content').hide();
  });
});

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