Question

我想通过 Javascript 创建一个DIV元素，但它应该有onMouseOver效果。

所以我知道HTML中的标签是什么样的：

<div onMouseOver="doSth()" onMouseOut="doSthElse()"> </div>

我知道如何创建我的DIV：

var myDiv= document.createElement("div");
//style settings
document.body.appendChild(myDiv);

但如何在Javascript代码中创建效果？

Answer 1

没有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 );

Answer 2

使用jQuery .hover():

$('#myDiv').hover(doSth, doSthElse);

Answer 3

我建议使用.attr() jquery：

$(myDiv).attr("onMouseOver","doSth()");
$(myDiv).attr("onMouseOut","doSthElse()");

Answer 4

使用纯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
}

Answer 5

如果您只想显示其他元素或更改div的样式，您还可以使用CSS类：

var div = document.createElement('div');
div.className = "hoverEffect";

然后你可以使用CSS：hover选择器设置div的样式。例如：

div.hoverEffect:hover {
    color:#fff;
}

div.hoverEffect child {
    display:none;
}

div.hoverEffect:hover child {
    display:block;
}

Answer 6

您可以在属性上传递所有调用函数，如下所示：

$('#idColor').attr("onMouseOver","showStone('"+arr[i]+"')");

例如：

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");
}

Answer 7

一个不使用JQuery的选项是setAttribute()。与其他选项不同，它还允许您在函数调用中设置参数。例如，在您的函数需要更改调用元素的情况下，传递参数this。

var myDiv= document.createElement("div");
myDiv.setAttribute("onmouseover", "myFunction(this)")
document.body.appendChild(myDiv);

使用JS创建带有onMouseOver效果的DIV

7 个答案: