JS colour change stops working when CSS added

Question

This is a seriously 'my first crack at HTML/JS' kind of query.

What am I trying to do?
I'm building a simple webpage where there is content that acts as a 'checklist'. eg - in my code below, you have finished 'example 1' so you click it, and onclick it should turn the background of that section a different colour.

What is going wrong
The issue I'm having is that the JS I'm using does not work when I add a CSS class/id to style it. It only works when it is a bare-bones 'li' tag.

Ironically for the sake of posting this question; when I take the script content from the separate .js file and add it to be done in the html, neither seem to work...

JS Is very much my least experienced area, would somebody have any pointers for the below code (very quick mock up of random content, not the actual page).

EDIT I forgot to add .mouseover and .selected when I originally posted this, now both are working fine on the 'run code snippet' on here and not on the page... it's no doubt something I've done on the organization of the actual project.

Thanks to all who have replied!! :)

//COLOUR CHANGE ON-CLICK AND MOUSE HOVER
$(document).ready(function() {
  $('li').on('click', function() {
    $(this).toggleClass('selected');
  });
  $('li').on('mouseenter', function() {
    $(this).toggleClass('mouseover')
  });
  $('li').on('mouseleave', function() {
    $(this).toggleClass('mouseover')
  });
});

.container {
  background-color: #0375B4;
  margin-bottom: 20px;
}

.listitem {
  border: 1px;
  background: #E2F2FF;
  margin: 10px;
  padding: 9px;
  font-size: 23px;
  list-style-type: none;
}

/* EDIT : I missed this off on my original post yesterday sorry! */
/* shadow effect when hovering over list items */
.selected {
background: #a7ff7f;
}
.mouseover {
box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.2), 0 8px 20px 0 rgba(0, 0, 
0, 0.19);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">
      <ul>
        <li class="listitem">example 1</li>
        <li class="listitem">example 2</li>
        <li class="listitem">example 3</li>
      </ul>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col">
      <ul>
        <li>example 1</li>
        <li>example 2</li>
        <li>example 3</li>
      </ul>
    </div>
  </div>
</div>

Answer 1

Add the missing classes selected, 'mouseover'. Then you will see that your code works perfectly.

working example with added class selected only

$(document).ready(function() {
  console.log(1)
  $('li').on('click', function() {
    $(this).toggleClass('selected');
  });
  $('li').on('mouseenter', function() {
    $(this).toggleClass('mouseover')
  });
  $('li').on('mouseleave', function() {
    $(this).toggleClass('mouseover')

  });
});

.container {
  background-color: #0375B4;
  margin-bottom: 20px;
}

.listitem {
  border: 1px;
  background: #E2F2FF;
  margin: 10px;
  padding: 9px;
  font-size: 23px;
  list-style-type: none;
}

.selected {
  color: red;
}

li {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="container">
  <div class="row">
    <div class="col">
      <ul>
        <li class="listitem">example 1</li>
        <li class="listitem">example 2</li>
        <li class="listitem">example 3</li>
      </ul>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col">
      <ul>
        <li>example 1</li>
        <li>example 2</li>
        <li>example 3</li>
      </ul>
    </div>
  </div>
</div>

<style>

</style>

<script>
  //COLOUR CHANGE ON-CLICK AND MOUSE HOVER
</script>

Answer 2

You have to add styles for "selected" to be applied to the element:

.selected {
  background-color: red;
}

Once you click on the li element it have "selected" css class and new. style will be applied. When clicked again it will be removed. To be more precise, depending on how much you develop your code, the styles should specify the element in more details. It will be probably:

li.selected {...}

or

.listitem.selected {...}

btw. Instead of toggling class when mouse is over element with JS you can have the same effect with CSS only:

li:hover {
  background-color: yellow;
}

Answer 3

add styling

//COLOUR CHANGE ON-CLICK AND MOUSE HOVER
$(document).ready(function() {
  $('li').on('click', function() {
    $(this).toggleClass('selected');
  });
  $('li').on('mouseenter', function() {
    $(this).toggleClass('mouseover')
  });
  $('li').on('mouseleave', function() {
    $(this).toggleClass('mouseleave')
  });
});

.container {
  background-color: #0375B4;
  margin-bottom: 20px;
}

.listitem {
  border: 1px;
  background: #E2F2FF;
  margin: 10px;
  padding: 9px;
  font-size: 23px;
  list-style-type: none;
}

.listitem.selected {
  background: red;
}
.listitem.mouseover {
  background: green;
}
.listitem.mouseleave {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">
      <ul>
        <li class="listitem">example 1</li>
        <li class="listitem">example 2</li>
        <li class="listitem">example 3</li>
      </ul>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col">
      <ul>
        <li>example 1</li>
        <li>example 2</li>
        <li>example 3</li>
      </ul>
    </div>
  </div>
</div>