javascript 使用 JS 创建具有 onMouseOver 效果的 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24486529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create DIV with onMouseOver effect with JS
提问by user2078872
I would like to create a DIV element via Javascript, but it should have a onMouseOvereffect.
我想通过Javascript创建一个 DIV 元素，但它应该有onMouseOver效果。
so I know what the tags look like in HTML:
所以我知道标签在 HTML 中的样子：
<div onMouseOver="doSth()" onMouseOut="doSthElse()"> </div>
and I know how to create my DIV:
我知道如何创建我的 DIV：
var myDiv= document.createElement("div");
//style settings
document.body.appendChild(myDiv);
but how do I create the effect in Javascript code?
但是如何在 Javascript 代码中创建效果？
回答by christian314159
Without jQuery, this is what you want:
没有 jQuery，这就是你想要的：
var myDiv = document.createElement('div');
myDiv.onmouseout = doSth;
myDiv.onmouseover = doSthElse;
// with doSth & doSthElse being functions you defined somewhere else already
// otherwise you can assign a function here:
// myDiv.onmouseout = function(){};
document.body.appendChild( myDiv );
回答by Gildas.Tambo
Use pure Javascript EventTarget.addEventListener
使用纯 Javascript EventTarget.addEventListener
var myDiv= document.createElement("div");
myDiv.addEventListener("mouseover", mouseOver, false);
myDiv.addEventListener("mouseout", mouseOut, false);
document.body.appendChild(myDiv);
function mouseOver()
{
//do something
}
function mouseOut()
{
//do something
}
回答by zliw
If you just want to display some other element or change the style of the div, you can also use a CSS class:
如果只想显示其他元素或更改 div 的样式，也可以使用 CSS 类：
var div = document.createElement('div');
div.className = "hoverEffect";
Then you can style the the div using the CSS :hover selector. For example:
然后您可以使用 CSS :hover 选择器设置 div 的样式。例如：
div.hoverEffect:hover {
color:#fff;
}
div.hoverEffect child {
display:none;
}
div.hoverEffect:hover child {
display:block;
}
回答by Claudio Guirunas
You can pass all calls function on attributes looks like this:
您可以在属性上传递所有调用函数，如下所示：
$('#idColor').attr("onMouseOver","showStone('"+arr[i]+"')");
For example:
例如：
var arr = new Array();
arr.push("granite-alaskawhite.jpg");
arr.push("granite-bordeauxriver.jpg");
arr.push("granite-copenhagen.jpg");
for(var i = 0; i < arr.length; i++ ) {
var img = document.createElement('img');
var idColor = 'color' + i;
img.id = idColor;
img.src = "assets/images/projects3d/colors/" + arr[i];
img.className = 'proj-items';
$("#colors").append(img);
//Call functions
$('#' + idColor).attr("onMouseOut","hideStone()");
$('#' + idColor).attr("onMouseOver","showStone('"+arr[i]+"')");
}
function hideStone() {
$("#p3ddesc").html( "" );
$('#p3ddesc').attr("class","p3ddesc");
}
function showStone( stoneTxt ) {
$("#p3ddesc").html( stoneTxt );
$('#p3ddesc').attr("class","p3ddesc-active");
}
回答by Alex Char
I suggest to use .attr()jquery:
我建议使用.attr()jquery：
$(myDiv).attr("onMouseOver","doSth()");
$(myDiv).attr("onMouseOut","doSthElse()");
