时间戳

首页 > 解决方案 > 如何在鼠标悬停时为 LI 项目赋予颜色？

javascript - 如何在鼠标悬停时为 LI 项目赋予颜色？

问题描述

我想用 javascript 在鼠标悬停时为 LI 项目着色。对于那些认为我可以使用 Css 的人。你是对的，但对于这个我需要 Javascript

这是我的代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>

</head>
<body>

<p>An unordered list:</p>
<ul id='lijst'>
    <li>Coffee</li>
    <li>Thea</li>
    <li>Milk</li>
</ul>



<p id="demo"></p>

<script>
      window.onload = function() {
        var list = document.getElementById('lijst');
        var y = list.getElementsByTagName('LI');
        list.addEventListener('mouseover', function(e) {

        });
      }


</script>

</body>
</html>

因此，当您将鼠标移到咖啡、茶或牛奶上时。比他们会是橙色的。但我不知道怎么做。

标签： javascript

解决方案

  • 你可以简单地使用css它。

.list li:hover {
    color : #FF0000
}
<ul class="list">
    <li >Coffee</li>
    <li >Thea</li>
    <li >Milk</li>
</ul>

  • 你可以javascript这样使用

function hoverList(list) {
  list.style.color = "#FF0000";
}
    <ul class="list">
        <li onmouseover="hoverList(this)">Coffee</li>
        <li onmouseover="hoverList(this)">Thea</li>
        <li onmouseover="hoverList(this)">Milk</li>
    </ul>

推荐阅读