HTML and JS Conflicting Elements (MouseOver)

Question

I'm attempting to have an element in my layout to change text and background colors onMouseOver, and then revert to their original state when rolled off. The problem is that JS doesn't seem to recognize the nature of my CSS.

The element (#sidebar) has these pieces of CSS code (code of the sidebar itself not relevant):

#sidebar ul {
list-style-type: none;
}

#sidebar li {
    width:100px;
    border-radius: 25px;
    text-align: center;
    background-color: #AFCEEA;
    border: 5px solid #195A94;
    font-weight: bold;
    line-height: 50px;
    margin-top: 10px;
    margin-left: 5px;
}

And it looks like this, prior to OnMouseOver:

This is the JS I'm using to attempt the onMouseOver:

<script type="text/javascript">
    function changeColor(myColor) {
    var sidebar = document.getElementById('sidebar li');
    sidebar.style.fontcolor = "#6588C7";
    sidebar.style.backgroundColor = "#6588C7";
}
</script>

With this implementation in the div:

<div id ="sidebar li">
    <ul><li onmouseover="changeColor('new color')"><p class="class1">writing<p></li></ul>
</div>

But it does this to my sidebar instead:

How can I get the color to stay in the little boxes?

Answer 1

You can really simplify your code by using :hover instead of onmouseover.

I am using a flexbox for li to make center alignment easy. You do not longer need to suppress the list-style because the list items are no longer displayed as a list-item.

You may no longer need class1 for the paragraphs. I just kept them in.

function changeText(myText) {
  //find variable on page called 'myContent' and give it var name display 
  var display = document.getElementById('content'); 
  display.innerHTML = ""; 
  display.innerHTML = "New content.";
}

#sidebar li {
  width: 100px;
  height: 100px;
  border-radius: 25px;
  background-color: #AFCEEA;
  border: 5px solid #195A94;
  font-weight: bold;
  display: flex;
  align-items: center; /* Vertical alignment */
  justify-content: center; /* Horizontal alignment */
}

#sidebar li:hover {
  background-color: red;
}
/* Apply top margin to all list elements except for the first one */
#sidebar li:not(:first-child) {
  margin-top: 10px;
}

#content { 
  border-radius: 25px; 
  width: 750px; 
  height: 500px; 
  margin-top: 50px; 
  margin-left: 300px; 
  background-color: azure; 
  padding: 50px; 
}

<div id="sidebar">
  <ul>
    <li>
      <p class="class1">writing<p>
    </li>
    <li>
      <p class="class1">games/art<p>
    </li>
    <li>
      <p class="class1">music<p>
    </li>
  </ul>
</div>

<div id="content" onclick="changeText()"> <p>Content here.</p> </div>