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>

Where are the CSS classes selected and mouseover defined? Chances are, the listitem class is defined in your stylesheet much later and therefore overrides the styles applied by the selected class. — Terry
– Terry, Commented Jan 27, 2022 at 20:02
Sorry I just realised I missed that off in the post, now edited and added! — joebreaker
– joebreaker, Commented Jan 28, 2022 at 11:56

Sarout · Accepted Answer · 2022-01-28 11:08:43Z

2

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>

edited Jan 28, 2022 at 11:08

Sarout

9041 gold badge8 silver badges26 bronze badges

answered Jan 27, 2022 at 20:06

Maik Lowrey

17.8k8 gold badges55 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

joebreaker Over a year ago

Thank you so much Maik, this is essentially what I was trying to achieve. Do you have any advice for making it the (skyblue) background that changes colour rather than the font? :)

Sarout Over a year ago

you can change css properties

Maik Lowrey Over a year ago

@joebreaker Thank you too. That is only css styleing. Change the selected class like: .selected { background: #E2F2FF; }

joebreaker Over a year ago

I've just realized I forgot to add '.selected' and '.mouseover' on my post yesterday, I've since edited and added this with a note

joebreaker Over a year ago

Now it works in both li items on 'run code snippet' but not on my actual page/project... clearly I've made an error in the full code, so I'll give it a tidy up. Thank you so much for your responses

fela · Accepted Answer · 2022-01-27 20:22:21Z

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

edited Jan 27, 2022 at 20:22

answered Jan 27, 2022 at 20:12

fela

1,19212 silver badges9 bronze badges

1 Comment

joebreaker Over a year ago

the li.selected and .listitem.selected tip seems like it's very much worth having a go with, thank you!

Sarout · Accepted Answer · 2022-01-27 20:06:52Z

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>

Collectives™ on Stack Overflow

JS colour change stops working when CSS added

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related