Конфликтующие элементы HTML и JS (MouseOver)

Question

Я пытаюсь добавить в свой макет элемент, чтобы изменить цвет текста и фона в onMouseOver, а затем вернуться в исходное состояние после отката.Проблема в том, что JS, похоже, не распознает природу моего CSS.

Элемент (#sidebar) содержит следующие фрагменты кода CSS (сам код боковой панели не имеет значения):

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

И это выглядит до OnMouseOver:

Это JS, который я использую для попытки onMouseOver:

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

С этой реализацией в div:

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

Но вместо этого он делает это с моей боковой панелью:

Как я могу заставить цвет оставаться в маленьких коробочках?

Answer 1

На основании вашего кода вы можете сделать:

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

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

<script type="text/javascript">
  function changeColor(e) {
    var sidebar = e.currentTarget;
    sidebar.style.color = "#fff";
    sidebar.style.backgroundColor = "#6588C7";
  }

  var li_elements = document.getElementById('sidebar').getElementsByTagName('li');
  for (var i = 0; i < li_elements.length; i++) {
    li_elements[i].addEventListener('mouseover', changeColor);
  }
</script>

Но более простое решение состоит в том, чтобы удалить JavaScript и просто сделать это с помощью CSS:

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

#sidebar li:hover {
  color: #fff;
  background-color: #6588C7;
}

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

Answer 2

имя идентификатора div неверно

var sidebar = document.getElementById('sidebar-li');

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

и

<div id ="sidebar-li">
   <ul>
       <li onmouseover="changeColor('#ffffff')">
            <p class="class1">writing<p>          
       </li> 
   </ul>
</div>

Answer 3

Вам не нужен javascript для чего-то столь же тривиального, как это.Вы можете использовать :hover CSS псевдокласс.Подробнее об этом здесь

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

#sidebar li:hover {
  color: tomato;
  background: #333
}

<div id ="sidebar">
  <ul>
    <li>
      <p class="class1">writing<p>
     </li>
     <li>
      <p class="class1">writing 2<p>
     </li>
  </ul>
</div>

Answer 4

Вы действительно можете упростить свой код, используя :hover вместо onmouseover.

Я использую flexbox для li, чтобы упростить выравнивание по центру.Вам больше не нужно подавлять list-style, поскольку элементы списка больше не отображаются как элементы списка.

Возможно, вам больше не понадобится class1 для абзацев.Я просто держал их в себе.

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>

Answer 5

Ваш идентификатор div неверен.Должно быть так:

<div id ="sidebar">
    <ul><li onmouseover="changeText('new text')" onmouseout="resetText()"><p class="class1">writing<p></li>
</div>

Answer 6

getElementById принимает аргумент id, но вместо этого вы передаете ему селектор.Вы можете использовать document.querySelector вместо этого.Документация по селектору запросов: Селектор запросов