如何为JGraph弹出菜单设置样式？子菜单悬停及字体颜色修改方法

我来帮你搞定这两个需求！基于你已经写好的代码，我们只需要在showMenu方法里补充几行逻辑就能实现：

1. 修改整个菜单的字体颜色 #

mxPopupMenu的菜单项默认带有mxPopupMenuItem类，我们可以通过这个类选择器批量设置所有菜单项的字体颜色。在你现有的代码里，设置完_div的背景和边框后，添加这段代码：

// 设置所有菜单项的字体颜色
const menuItems = _div.querySelectorAll('.mxPopupMenuItem');
menuItems.forEach(item => {
  item.style.color = '#ffffff'; // 这里替换成你想要的字体颜色，比如白色
});

2. 子菜单悬停时修改背景色 #

因为子菜单是动态生成的，用事件委托来处理悬停事件会更高效（不用给每个子项单独绑定事件）。我们给菜单容器_div绑定鼠标进出事件，判断目标元素是不是菜单项，再修改背景色：

// 处理菜单项（包括子菜单）的悬停背景色
_div.addEventListener('mouseover', (e) => {
  const target = e.target.closest('.mxPopupMenuItem'); // 确保选中菜单项本身（比如点击到图标也能触发）
  if (target) {
    target.style.backgroundColor = '#555555'; // 替换成你想要的悬停背景色
  }
});

_div.addEventListener('mouseout', (e) => {
  const target = e.target.closest('.mxPopupMenuItem');
  if (target) {
    target.style.backgroundColor = 'transparent'; // 恢复默认背景，或者和菜单容器背景一致
  }
});

完整的修改后代码 #

把这些整合到你的原有代码里，最终代码如下：

var mxPopupMenuShowMenu = mxPopupMenu.prototype.showMenu;
mxPopupMenu.prototype.showMenu = function() {
  mxPopupMenuShowMenu.apply(this, arguments);
  var _div = this.div;
  
  // 原有样式修改
  _div.style.backgroundColor = 'darkgrey'; 
  _div.style.border = 'none';

  // 1. 设置整个菜单的字体颜色
  const menuItems = _div.querySelectorAll('.mxPopupMenuItem');
  menuItems.forEach(item => {
    item.style.color = '#ffffff'; // 自定义字体颜色
  });

  // 2. 子菜单悬停背景色处理（事件委托）
  _div.addEventListener('mouseover', (e) => {
    const target = e.target.closest('.mxPopupMenuItem');
    if (target) {
      target.style.backgroundColor = '#555555'; // 自定义悬停背景色
    }
  });

  _div.addEventListener('mouseout', (e) => {
    const target = e.target.closest('.mxPopupMenuItem');
    if (target) {
      target.style.backgroundColor = 'transparent';
    }
  });

  // 原有鼠标进出日志（可选保留）
  _div.onmouseover = function(){
    console.log('mouse over in popup');
  }
  _div.onmouseout = function(){
    console.log('mouse over out popup');
  }
};

小提示 #

如果你觉得用内联样式不够优雅，也可以提前定义CSS类，然后通过classList.add()给元素添加类名，这样样式和逻辑分离会更好。比如：

.custom-popup-item {
  color: #ffffff;
}
.custom-popup-item:hover {
  background-color: #555555;
}

然后在代码里用menuItems.forEach(item => item.classList.add('custom-popup-item'))替代内联样式设置。

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