HTML和JS冲突元素（MouseOver）

Question

我正在尝试在布局中添加一个元素，以更改MouseOver上的文本和背景颜色，然后在滚下时恢复为原始状态。问题在于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之前，它看起来像这样：

这是我用来尝试onMouseOver的JS：

<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

您可以使用:hover而不是onmouseover来简化代码。

我正在将li的{​​{3}}用于中心对齐。您不再需要隐藏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 2

getElementById接受id参数，但是您正在向其传递选择器。您可能要改用document.querySelector。查询选择器文档： Query Selector

Answer 3

您的div ID不正确。应该是这样的：

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

Answer 4

您不需要javascript这样简单的东西。您可以使用:hover CSS伪类。进一步了解here

#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 5

div ID名称不正确

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 6

根据您的代码，您可以执行以下操作：

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