如何使用 JavaScript 更改每个列表项的背景颜色？

Question

当我将鼠标移到列表上时，我正在努力尝试更改列表中每个项目的背景颜色。

我有一个大致像这样的列表：

<ul id="ul_menu">
  <li>
    <a href="#ref" title="go to ref" id="menu_selector" onmouseover="mouseOver()" onmouseout="mouseOut()">Text</a>
  </li>
  <li>
    <a href="#ref" title="go to ref" id="menu_selector" onmouseover="mouseOver()" onmouseout="mouseOut()">Text</a>
  </li>
  <li>
    <a href="#ref" title="go to ref" id="menu_selector" onmouseover="mouseOver()" onmouseout="mouseOut()">Text</a>
  </li>
</ul>

我正在尝试使用 Javascript 来实现，如下所示：

var list = document.getElementByID("ul_menu");
 var listItems = ul.getElementsByTagName("li");
 function mouseOver() {
  for (li in listItems){
   li.style.backgroundColor = "yellow";
  }
 } 
 function mouseOut() {
  for (li in listItems){
   li.style.backgroundColor = null;
  }
 }

我正在使用来自 XML 文件的 XSLT 动态生成此 HTML 代码，因此我无法为每个列表项选择特定的 ID。

你能帮帮我吗？

谢谢大家

Answer 1

如果我没看错（如果不正确请告诉我），您只想在鼠标指针悬停在列表项上时更改文本的背景颜色，对吗？

如果是这样，你可以很容易地做到这一点 CSS:

.yellow:hover {
  background-color: yellow;
}

<ul>
  <li>
    <a href="#ref" title="go to ref" class="yellow">Text</a>
  </li>
  <li>
    <a href="#ref" title="go to ref" class="yellow">Text</a>
  </li>
  <li>
    <a href="#ref" title="go to ref" class="yellow">Text</a>
  </li>
</ul>

如果你真的想使用JavaScript，它仍然可以，但你需要指定突出显示区域的宽度。尝试这样的事情：

function yellowa1(x) {
  a1.style.backgroundColor = "yellow";
  a1.style.width = "5px";
}

function yellowb2(x) {
  b2.style.backgroundColor = "yellow"
  b2.style.width = "5px";
}

function yellowc3(x) {
  c3.style.backgroundColor = "yellow"
  c3.style.width = "5px";
}

function nulla1(x) {
  a1.style.backgroundColor = "transparent";
}

function nullb2(x) {
  b2.style.backgroundColor = "transparent";
}

function nullc3(x) {
  c3.style.backgroundColor = "transparent";
}

<body>
  <ul>
    <li onmouseover="yellowa1(this)" onmouseout="nulla1(this)" id="a1">a</li>
    <li onmouseover="yellowb2(this)" onmouseout="nullb2(this)" id="b2">b</li>
    <li onmouseover="yellowc3(this)" onmouseout="nullc3(this)" id="c3">c</li>
  </ul>
</body>

此外，为了将来参考，请注意 id 用于标识一个元素，而 class 可用于标识多个元素。同样，只有 DOM 方法 .getElementById 的 Id 部分中的 I 应该大写，而不是两个字母。并确保您的 <ul> 元素已定义。

Answer 2

 #ul_menu li:hover{
     background-color: yellow;
 }

//Try using just CSS to achieve the result if you don't mind
<ul id="ul_menu">
  <li>
    <a href="#ref" title="go to ref" id="menu_selector" >Text</a>
  </li>
  <li>
    <a href="#ref" title="go to ref" id="menu_selector" >Text</a>
  </li>
  <li>
    <a href="#ref" title="go to ref" id="menu_selector">Text</a>
  </li>
</ul>

如何使用 JavaScript 更改每个列表项的背景颜色？

How do I change background color of each list item with JavaScript?

html

javascript

css

xml

xhtml