JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ms">The crusade to feed every orphan in the world.</div>

  <div id="nc_wrap2">
  <a class="nc1" href="#">nc1</a>
  <a class="nc2" href="#">nc2</a>
  <a class="nc3" href="#">nc3</a>
  <a class="nc4" href="#">nc4</a>
  <a class="nc5" href="#">nc5</a>
  </div>

JavaScript

$(document).ready(function(){
  $('a').mouseover(function() {
  switch ($(this).attr('class')) {
  case 'nc1':
    new_content = 'Twitter';
    break;

  case 'nc2':
    new_content = 'Facebook';
    break;

  case 'nc3':
    new_content = 'Linked In';
    break;

  case 'nc4':
    new_content = 'Flickr';
    break;
  case 'nc5':
    new_content = 'RSS Feed';
    break;

  case 'cs1':
    new_content = 'Email';
    break;
  case 'cs2':
    new_content = 'Telephone';
    break;

  case 'cs3':
    new_content = 'Live Chat';
    break;

  case 'cs4':
    new_content = 'Skype';
    break;

  case 'cs5':
    new_content = 'Google Voice';
    break;

  default:
    new_content = 'The crusade to feed every orphan in the world';
    break;
  }

  $('#ms').html(new_content)
  }).mouseout(function() {
  $('#ms').text('The crusade to feed every orphan in the world');
  });});