最简单的方法是避免使用 id ，而是使用 CSS 自定义属性，例如 --hoverColor :

/*
  The default styling for the element(s):
*/
.p-class {
  color: #000;
  background-color: silver;
}

/*
  The styles for the :hover pseudo-class/interaction:
*/
.p-class:hover {
  /* the var() retrieves the named custom-property from
     the closest ancestor element upon which it's defined.
     Here this is specified in the inline 'style'
     attribute for the .p-class elements: */
  color: var(--hoverColor);
}

<p class="p-class" style="--hoverColor: #000">Hi</p>
<p class="p-class" style="--hoverColor: #FFF">Hi</p>
<p class="p-class" style="--hoverColor: #FFFF66">Hi</p>
<p class="p-class" style="--hoverColor: #498F83">Hi</p>

但是，给出问题中发布的您自己的代码，可以相对轻松地使其工作，如下所示：

const pElements = document.querySelectorAll('.p-class'),
  toggle = (event) => {
    // retrieves the element node to which the event
    // was bound:
    const target = event.currentTarget;
    
    // if the event is mouseenter (so the user is
    // hovering over the element):
    if (event.type === 'mouseenter') {
      // we update the color of the element
      // according to the color held in the 'id'
      // attribute, using a template-string to
      // interpolate that value into the string
      // to form a valid hexadecimal colour:
      target.style.color = `#${target.id}`;
    } else {
      // if the event is of any type other than
      // mouseenter, we unset the colour by setting
      // the colour to an empty string (an invalid
      // value) causing the style-rule to be discarded:
      target.style.color = '';
    }
  };

// using NodeList.prototype.forEach() to iterate over the
// NodeList using an Arrow function:
pElements.forEach(
  // para is a reference to each of the element Nodes of
  // the NodeList over which we're iterating:
  (para) => {
    // here we bind a named function to handle
    // the mouseenter/mouseleave (hover/unhover)
    // events; in order to avoid duplicating the
    // anonymous function:

    // to handle the mouseenter:
    para.addEventListener('mouseenter', toggle);
    // to handle the mouseleave:
    para.addEventListener('mouseleave', toggle);
  });

.p-class {
  color: #000;
  background-color: silver;
}

<p class="p-class" id="000">Hi</p>
<p class="p-class" id="FFF">Hi</p>
<p class="p-class" id="FFFF66">Hi</p>
<p class="p-class" id="498F83">Hi</p>

参考：

• CSS：
• CSS 自定义属性 。
• var() 。
• JavaScript：
• 箭头函数 。
• document.querySelectorAll() 。
• EventTarget.addEventListener() 。
• NodeList.prototype.forEach() 。