JSFiddle - React, Tailwind, and code Playground

HTML

<span class='user_name'>
  Peter Green <span class='remove_user'>X</span>
</span>

CSS

.user_name {
    width: 400px;
    height: 200px;
    display: block;
    background: #f00;
}
.remove_user {
    background: #0f0;
    padding: 5px;
    display: inline-block;
}
.hover-1 {
    background: #f00;
}
.hover-2 {
    background: #0f0;
}

JavaScript

$('.remove_user').hover(function () {
    $(this).toggleClass('hover-1').parent('span.user_name').toggleClass('hover-2');
});