onmouseover 函数 Javascript 用于更改部分的背景答案

【问题标题】：onmouseover function Javascript for changing the background of a sectiononmouseover 函数 Javascript 用于更改部分的背景
【发布时间】：2016-03-02 14:05:14
【问题描述】：

我正在尝试编写一个函数，通过使用“onmouseover”来更改部分背景颜色，方法是用鼠标移动它。我正在寻找类似的问题并尝试了提供的解决方案，但它不适用于我的代码。这是我所做的：

function Rectangle(count){
var newRec = document.createElement("SECTION");
newRec.style.width="202px";
newRec.style.height="312px";
newRec.style.border="1px solid #3f3f3f";
newRec.style.background = "#FFFFFF";
newRec.style.display = "inline-block";
newRec.style.margin= "44px";
newRec.style.size= "50px";

var appendRec = function() {
    document.addEventListener("onmouseover", myFunction);
    document.getElementsByTagName('main')[0].appendChild(newRec);
};

function myFunction() {
  document.getElementTagName("SECTION").style.background = "#000000";
};


appendRec();     
};

谁能告诉我我做错了什么？我正在尝试使用控制台，但这段代码并没有说有什么问题......

【问题讨论】：

你能把你的整个代码sn-p，重要的是你如何以及在哪里放置这个sn-p ..
什么是main标签？
document.getElementTagName 不存在，你应该使用document.getElementsByTagName，这也会返回一个元素数组。我可以问你为什么不用css 这样做吗？
我更改了它并添加了 By 但它仍然不起作用：/ 并且它是使用 javascript 的要求
标签 main 是找到创建的部分的位置

标签： javascript onmouseover

【解决方案1】：

document.getElementTagName("SECTION").style.background = "#000000"; 错误。

首先，它被称为getElementsByTagName()。其次，它返回一个数组，而不仅仅是一个元素。

解决方案：给<section> 一个id 并改用getElementById()。

【讨论】：

我给它的 id 是这样的：newRec.setAttribute("id", "myRec");然后将其更改为： var appendRec = function() { document.addEventListener("onmouseover", myFunction); document.getElementsByTagName('main'[0].appendChild(newRec); }; function myFunction() { document.getElementById('myRec').style.background="#000000";}; 但它仍然无法正常工作..知道为什么吗？

【解决方案2】：

你只需要

document.getElementById('WhichElementWillBeHoveredID').onmouseenter = function() {
  // when entering element...
}

document.getElementById('WhichElementWillBeHoveredID').onmouseleave = function() {
  // when leaving element
}

当然……你也可以轻松地使用 CSS……

SELECTOR:hover { background-color: #444 }

【讨论】：

【解决方案3】：

我创建了一个小提琴来改变背景颜色，这是唯一的要求，那么我认为它很好

http://jsbin.com/cagawa/edit?html,css,output

#mydiv{
  background: #cccccc;
}

#mydiv:hover{
  background: #ffdd00;
}

【讨论】：

【解决方案4】：

尝试改变

var appendRec = function() {
    document.addEventListener("onmouseover", myFunction);
    document.getElementsByTagName('main')[0].appendChild(newRec);
};

到

var appendRec = function() {
    document.getElementsByTagName('main')[0].appendChild(newRec);
    newRec.addEventListener("mouseover", myFunction);
};

我编辑了 littlebit 代码，现在试试 :)

【讨论】：

它只是将第一部分着色为黑色：/

【解决方案5】：

如果我在第 12 行没有错： document.addEventListener("onmouseover", myFunction);

应该替换为

document.addEventListener("onmouseover",myFunction());

【讨论】：