HTML 和 JS 冲突元素 (MouseOver)

Question

我试图在我的布局中添加一个元素，以便在鼠标悬停时更改文本和背景颜色，然后在鼠标悬停时恢复到它们的原始状态。问题是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

getElementById 接受 id 参数，但您传递给它的是一个选择器。您可能想改用 document.querySelector。查询选择器文档： Query Selector

Answer 2

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

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

Answer 3

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

我正在为 li 使用 flexbox 来简化居中对齐。您不再需要隐藏 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 4

你不需要 javascript 来处理像这样微不足道的事情。您可以使用 :hover CSS 伪 class。阅读更多相关信息 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>

HTML 和 JS 冲突元素 (MouseOver)

HTML and JS Conflicting Elements (MouseOver)

html

javascript

css

onmouseover