JS colour change stops working when CSS added-CodePudding

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).

//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;
}

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

CodePudding user response：

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 >
        <div >
            <div >
                <ul>
                    <li >example 1</li>
                    <li >example 2</li>
                    <li >example 3</li>
                </ul>
            </div>
        </div>
    </div>    
    
            <div >
        <div >
            <div >
                <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>

CodePudding user response：

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 >
  <div >
    <div >
      <ul>
        <li >example 1</li>
        <li >example 2</li>
        <li >example 3</li>
      </ul>
    </div>
  </div>
</div>
<div >
  <div >
    <div >
      <ul>
        <li>example 1</li>
        <li>example 2</li>
        <li>example 3</li>
      </ul>
    </div>
  </div>
</div>

CodePudding user response：

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 {...}

.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;
}