Question

嘿，我需要一个列表项来将鼠标悬停在上面，以更改颜色，但是它不起作用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
        var m = document.getElementById("Q");
        m.addEventListener("mouse over", function(){
            m.setAttribute("style", "background-color: #ccc;");
        }, false);
    </script>
    <li>1</li>
    <li id = "Q">Hello darkness my old friend</li>
    <li>2</li>
    </body>
</html>

我知道我可以使用CSS更改背景色

Answer 1

您可以使用简单的CSS来实现：

#q:hover {
    background-color: red;
}

Answer 2

您可以使用 setAttribute 更改元素的颜色

var myElement = document.getElementById("YOUR_ELEMENTS_UNIQUE_ID");

myElement.setAttribute('style', 'color: red');

Answer 3

如果要在用户悬停项目时添加效果（而在用户不悬停项目时将其删除-也称为“悬停”效果），则只需使用CSS：

#Q:hover {
    background-color: red;
}

如果要添加“永久”效果，请在用户将鼠标悬停在项目上后，使用JS：

var elem = document.getElementById('Q');
elem.addEventListener('onmouseenter', function(){this.style.backgroundColor = 'red'});

上面的功能可以改进为仅触发一次，这对于内存管理是一个不错的练习：

var elem = document.getElementById('Q');

function changeColor(e) {
    e.target.style.backgroundColor = 'red';
    e.target.removeEventListener('onmouseenter', changeColor);
};

elem.addEventListener('onmouseenter', changeColor);

它也可以应用于多个元素：

var targets = document.getElementsByClassName('myClassName');

function changeColor(e) {
    e.target.style.backgroundColor = 'red';
    e.target.removeEventListener('onmouseenter', changeColor);
};

targets.map(target => target.addEventListener('onmouseenter', changeColor));

Answer 4

只需从#red中删除＃，然后将“ click”事件更改为“ mouseover”，即可正常工作

var m = document.getElementById（“ Q”）; m.addEventListener（“ mouseover”，function（）{m.setAttribute（“ style”，“ background-color：red;”）;}，false）;

Answer 5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <li>1</li>
    <li id = "Q">Hello darkness my old friend</li>
    <li>2</li>
     <script>
        var m = document.getElementById("Q");
        m.addEventListener("mouseover", function(){
            m.style.backgroundColor = "#ccc";
        }, false);
    </script>
    </body>
</html>

这是我使用纯js和HTML的解决方案。

onmouseover 事件
onmouseleave 事件

->您只需在事件触发后更改样式即可。

也可以先将侦听器注册到js中的元素，但是我发布的解决方案可能具有更清晰的代码。

元素事件调用函数。函数更改元素样式。简单易懂，但我建议使用CSS伪样式。

function mouseEntered() {
  document.getElementById("Q").style.backgroundColor="pink";
};

function mouseLeaved() {
  document.getElementById("Q").style.backgroundColor="white";
};

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <li>1</li>
    <li onmouseover="mouseEntered()" onmouseleave="mouseLeaved()" id="Q">Hello    darkness my old friend</li>
    <li>2</li>
</body>
</html>

Answer 6

或者，您可以使用样式对象执行此操作。

var m = document.getElementById("Q");
m.addEventListener("click", function(){
    m.style.backgroundColor= '#000'
});

Answer 7

您可以使用jquery函数更改元素的颜色

<script>
$(document).ready(function(){
  $("p").mouseover(function(){
    $("p").css("background-color", "yellow");
  });
  $("p").mouseout(function(){
    $("p").css("background-color", "lightgray");
  });
});
</script>

HTML代码：

<p>Move the mouse pointer over this paragraph.</p>

Javascript代码来更改元素的颜色属性

7 个答案: