Советы Refacto для события JS при наведении

Question

Я хотел бы получить несколько советов о простом наведении, которые изменяют содержание описания над списком.
Я пытался сделать это, используя псевдо-классы до, после и при наведении курсора, но я не мог сделать это правильно, поэтому я переключился на Js и сумел это сделать.

HTML

<div id="description">This is an awesome content</div>

<div id="list"> 
  <span id="workfield_1" onMouseOver="changeparagraph()" onMouseOut="originalparagraph()"> Workfield_1 </span> | 
  <span id="workfield_2" onMouseOver="changeparagraph()" onMouseOut="originalparagraph()"> Workfield_2 </span> | 
  <span id="workfield_3" onMouseOver="changeparagraph()" onMouseOut="originalparagraph()"> Workfield_3 </span>
</div>

JS

const description = document.getElementById("description")

function changeparagraph() {
  switch (event.target.id) {
    case 'workfield_1': 
      description.innerHTML="A nice content about workfield_1";
      break;
    case 'workfield_2': 
      description.innerHTML="A nice content about workfield_2";
      break;
    case 'workfield_3': 
      description.innerHTML="A nice content about workfield_3";
      break;
    }
  } 

  function originalparagraph() {
    description.innerHTML="This is an awesome content";
  }

Есть ли у вас какие-либо предложения о том, как сделать это надлежащим, менее повторяющимся образом или другим способом?

Заранее спасибо!

Answer 1

Так лучше:

<div id="description">This is an awesome content</div>

<div id="list"> 
  <span onMouseOver="changeparagraph('A nice content about workfield_1')" onMouseOut="originalparagraph()"> Workfield_1 </span> | 
  <span onMouseOver="changeparagraph('A nice content about workfield_2')" onMouseOut="originalparagraph()"> Workfield_2 </span> | 
  <span onMouseOver="changeparagraph('A nice content about workfield_3')" onMouseOut="originalparagraph()"> Workfield_3 </span>
</div>

js:

const description = document.getElementById("description")

function changeparagraph(msg) {
      description.innerHTML=msg;
  } 

  function originalparagraph() {
    description.innerHTML="This is an awesome content";
  }

jsFiddle: https://jsfiddle.net/b80jzte3/